【オリジナル】モバイルWebページのフォント使用に関する考え方_html/css_WEB-ITnose

私は 2 年前に携帯電話プロジェクトに取り組み始めたばかりだったことを思い出します。PSD ドラフトを受け取った後、ビジュアル デザイナーがデザイン用の中国語フォントとして Microsoft Yahei を使用するのが好きなことに気づきました。フォントファミリーを Microsoft Yahei として定義し、後でそれをオンラインに投稿した後、注意深い製品マネージャーがそのページのフォントが Microsoft Yahei ではないことを発見し、私はショックを受け、製品と議論することもありました。

その後、iOS や Android などの携帯電話システムは Microsoft Yahei フォントをサポートしていないことを知りました。製品のニーズを満たし、ビジュアル ドラフトを確実に復元するために、Microsoft Yahei フォントはどのように定義されていますか。携帯電話？

@font-face は Microsoft Yahei フォントとして定義されており、Web サーバー上に保存され、必要なときに自動的にダウンロードされると誰もが考えると思います

えー

@font-face の使用については、この記事を参照してください。 CSS3 @「by Da Mo Font-face」に詳しく紹介されています。

Yahei フォントの問題は解決されましたが、第一にユーザーのトラフィックを消費し、第二にページを開く速度が遅くなるという影響もあります。

製品マネージャーを説得するために、次の 3 つの主要な携帯電話システムのフォント情報を見つけました。

iOS システム

デフォルトの中国語フォントは STHeiti (Apple Blackbody) です

デフォルトの英語フォントは Helvetica

です

デフォルトの数字 フォントは HelveticaNeue

です

いいえ Microsoft Yahei フォントです

android システム

デフォルトの中国語フォントは Droidsansfallback (中国宋朝) です

デフォルトの英語およびデジタル フォントは Droid Sans です

いいえMicrosoft Yahei フォント

winphone システム

デフォルトの中国語フォントは Dengxian (Founder Isoline) です

デフォルトの英語およびデジタル フォントは Segoe です

Microsoft Yahei フォントはありません

そして簡単なテストを行いました。下の写真はテストマシン iPhone 4s、Samsung GT - N7000、Android 2.3.6、HTC Windows Phone 8.0 の 3 つの携帯電話のデフォルトの中国語フォントと英語フォントが表示されます:

3 つの異なる中国語フォントがサンセリフであることがわかります。 Microsoft Yahei Serifs などのフォントが使用されていないのはほんの小さな理由であり、ページでどのフォントが使用されていても、肉眼で違いを確認するのは難しく、製品のエクスペリエンスにはほとんど影響しません。

セリフ フォントとサンセリフ フォントの違いについては、下の図を参照してください。

次に、 システムのデフォルト フォントを使用することによって達成される視覚効果は、Microsoft Yahei フォントを使用する場合と大きく変わりません、賛否両論あり、最終的にプロダクト マネージャーを説得して、Microsoft Yahei を使用するという考えを断念しました。

結論

各携帯電話システムには独自のデフォルトフォントがあり、Microsoft Yaheiをサポートするものはありません

特別なニーズがない場合、携帯電話で中国語フォントを定義する必要はなく、システムデフォルトを使用してください

英語フォントとデジタル フォントは、Helvetica を使用できます。3 つのすべてのシステムがサポートされています。