Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
[ + expand ]美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較! 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定(和文等幅)の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境:ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く