ブログのレイアウトとフォントについて

原文:https://jellybool.com/post/how-to-setup-right-font-family-on-web
この文章は実は私が前に聞いた質問から始まりました.
ブログはどんな良い字体が推薦します
その後、鳥がいないようなので、私は自分であちこち資料を見て、得た情報をまとめました.
実はwebフォントの面では、きちんとしていれば、研究できるようです.下では本当にここで手斧を使う勇気がないので、以下は本人の経験と調べた資料だけをまとめます.

正しいフォント宣言方法

まず、多くの開発者が次のようなフォント宣言を使用する可能性があります.

font-family: " ";

これは一般的なWindowsユーザーにとっては体験的に友好的ではありません.これまで がWindowsで一番きれいなフォントだったかもしれませんが、あまりよくないと思います.しかし、ブログの読書体験を追求しているので、私たちはこのように簡単な一言でフォントの問題を解決したと思っているわけではありません.多くのユーザーの異なるオペレーティングシステムを考慮する必要はありません.以上のフォント宣言方式は と言えます.フォントには表示名とフォント名があり、以上はフォントの表示名を宣言しただけです.フォントにフォント名を宣言していません.ユーザーが中国語のオペレーティングシステムを使用してシステム言語に切り替えた場合、以上の宣言は無効になります.この場合、システムは正しいフォントファイルを見つけることができません.少なくともこのように宣言しなければなりません

font-family: "Microsoft YaHei"," ";

はい、そうです.フォント名と表示名を全部書いて、フォント名( )が前にあります.
単一システムの最適化について話した後、ユーザーとオペレーティングシステムのMac OS、Windows、Linuxを考慮する必要があります.簡単にすべてのマイクロソフトのブラックであれば、これらのページがMacとLinuxユーザーに表示されると、まるでぼろぼろになります.そのため、異なるオペレーティングシステムに対応するフォント宣言方法を見つけなければなりません.

font-family: "Lucida Grande", Helvetica, Arial, STXihei, " ", "Microsoft YaHei", " ", sans-serif;

HelveticaはiOS 7およびOSX 10.10 UIフォント(一部の文字が垂直に中央に位置するシーンではいくつかの小さな問題があり、一時的にLucida Grandeを先に使用することができます)で、どうでもいい場合は、実際にはHelveticaがMacで表示する効果が最高です.

ArialはMacとWindowsを通殺していると言える.

上にこれらがなければsans-serifを使いましょう.

以上の声明は、ほとんどのフォントの問題を解決することができます.さらに体験を最適化する必要がある場合は、UAによって異なるフォントをロードすることができます.この方法は最善の解決策かもしれません.そうしたくない場合は、次のソリューションを参考にしてください.
https://github.com/zenozeng/fonts.css
異なるdivの読書体験に基づいて異なるフォントを指定することができます.

レイアウトについて

一般的なWeb端末では、ノートパソコンまたはデスクトップ上の一般的なレイアウトサイズを指し、以下の点を考慮できます.

line-heightは1.8

に設定することが考えられます.

タイトルは正規のh 1,h 2などのラベル

を使用してください.

ピクチャは、応答式であり、中央に

を表示することが望ましい.