岩井玄貴/CSS

CSSのプロパティ

mask-image

mask-image

CSSでのマスクのやり方

 // マスクにする画像
 -webkit-mask-image: url(./mask.png);
 // 輝度とアルファマスクのどちらで扱うかを設定
 -webkit-mask-mode: alpha;
 // マスク画像をどのように繰り返すか
 -webkit-mask-repeat: no-repeat;
 // マスク画像の寸法
 -webkit-mask-size: 50% 50%;
 //マスク位置レイヤーに対する初期位置
  -webkit-mask-position: center center;

DEMO

参考

ソフィーのアトリエ

text-stroke　text-fill-color

text-stroke

テキスト文字の輪郭線の幅と色を指定します。

※この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。

text-fill-color

テキストの文字の塗りつぶしの色を指定します。

※この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。

「text-fill-color」「text-fill-color」でテキスト文字の輪郭線の幅と色と塗りつぶしの色を指定します

 // 塗りつぶし
 -webkit-text-fill-color: red;
 // 輪郭線の幅と色
 -webkit-text-stroke: 4px navy;

DEMO

参考

MDN web docs

font-variation-settings

バリアブルフォントとは？

バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。

「font-variation-settings」で文字の太さ、幅、イタリック、傾きの調整

 // 太さ
 font-variation-settings: "wght" 50;
 // 幅
 font-variation-settings: "wdth" 50;
 // イタリック
 font-variation-settings: "ital" 50;
 // 傾き
 font-variation-settings: "slnt" 50;
 //オプティカルサイズ
  font-variation-settings: "opsz" 50;

DEMO

参考

バリアブルフォントをWeb上で触ってみる
MDN-web-docs　可変フォントガイド

font-feature-settings

プロポーショナルフォントとは？

プロポーショナルフォント とは、文字ごとに文字幅が異なるフォントのこと。日本語では可変幅フォントともいう。 伝統的な活版印刷で用いる活字については、例えばラテン文字「i」とラテン文字「w」では文字の幅が異なり、ただ並べるだけで読みやすい単語が印字できるようになっている。これがプロポーショナルフォントである。

「font-feature-settings」で文字間隔調整

 // プロポーショナルメトリクス
 font-feature-settings: "palt";
 // 約物はそのままで文字詰め。行頭全角スペースも詰まる
 font-feature-settings: "pwid";
 // かなのみ文字詰め
 font-feature-settings: "pkna";

DEMO

使える日本語フォント

ヒラギノ、游ゴシック、Noto Sans JP など

参考

簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】Wikipedia　プロポーショナルフォント

---