モバイル Web ページで使用されるフォントについての考え_html/css_WEB-ITnose

まえがき

PCページを作るときは、フォントをMicrosoft Yaheiフォントに設定することが多いと記憶していますが、今、モバイルページを作るとき、デザイナーはフォントをMicrosoft Yaheiフォントに設定することが多いのですが、作成後にテスト中に気づいたことがあります。ページのフォントが Microsoft Yahei ではないのですが、どうすればよいですか?

後で知ったのですが、iosやandroidなどの携帯電話システムはMicrosoft Yaheiフォントをサポートしていません。製品のニーズを満たし、ビジュアル ドラフトを確実に復元するために、携帯電話は Microsoft Yahei フォントをどのように定義しますか?

@font-face の使い方

@font-face {    font-family: 'MicrosoftYaHei';    src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */    src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */             url('MicrosoftYaHei.ttf')  format('truetype'), /* Safari, Android, iOS */             url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */   }

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

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

携帯電話システムのデフォルトのフォント

3 つの主要な携帯電話システムのフォント情報:

ios システム

デフォルトの中国語フォントは Heiti SC

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

デフォルトのデジタル フォントは HelveticaNeue

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

android システム

デフォルトの中国語フォントは Droidsansfallback です

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

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

winphone システム

デフォルト中国語フォントはDengxian (Founder isolinear font)

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

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

添付ファイル: ios7 フォント リスト

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

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

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

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

結論

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

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

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

コード:

/* 移动端定义字体的代码 */body{font-family:Helvetica;}

再印刷アドレス: