年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そこで、iOS および Android デバイス上のさまざまなブラウザでサポートされているフォントを調査するというタスクが与えられました。 「研究」という言葉を聞くと頭が痛くなりました。私は単なる小さなプログラマーであり、製品開発者ではないので、そのような仕事をしたことはありません。まあ、あなたが理解した通りに受け取ってください。 私はフロントエンドで作業していますが、実のところ最も基本的なフォントの種類さえ知りません。一日研究した後、私の知識が大幅に広がったことに気づきました。どの有名人がこう言っていたか忘れましたが、「どんなに小さなことでも、10年間続ければその道の専門家になれる」では、早速、Web フォントについて私が知っている情報を皆さんと共有したいと思います。 1. Web コーディングでは、CSS によってデフォルトで使用される Web フォントは制限されていますが、新しいバージョンの CSS3 では、新しく追加された @font-face 属性を通じて、ブラウザーに読み込まれる特別なフォントを導入できます。 Web ページのテキスト コンテンツがブラウザーに表示されると、テキスト フォントは、デザイナーが CSS で定義したフォント ファミリの順序で表示されます。フォントファミリーとは何ですか?フォント ファミリは、次のコード行のように、CSS コードの「font-family」コード内に表示されるフォント名の種類です。 コードをコピー コードは次のとおりです。フォントファミリー:"Comic Sans MS","Youyuan","Heiti",サンセリフ; W3C 標準によると、コード行を解析する際、ブラウザはまずシステム内の Comic Sans MS フォントを検索します。このフォントがシステム内に存在する場合、ブラウザは Comic Sans MS フォントを使用します。存在しない場合は、次に Thin Round フォントを検索し、ブラウザがシステム内に存在するフォントを表現できるようになるまでこれを繰り返します。 なお、「sans-serif」は特定のフォントの名前ではなく、上記で説明したフォントが無効な場合に最終的に選択されるフォントです。ブラウザユニバーサルフォントと呼ばれます。使用しているブラウザのデフォルトのユニバーサルフォントによって異なります。「Arial」または「Helvetica」の場合があります。 2. Web ページでよく使用されるフォントは、通常、セリフ、サンセリフ、モノスペース、ファンタジー、キューシブの 5 つのカテゴリに分類されます。これらの共通名により、ユーザー エージェントは対応するコレクションからフォントを選択できます。 3. ウェブページでよく使われるフォント サンセリフ: Helvetica: デザイナーのお気に入りのフォントとして投票され、リアリズムスタイルとシンプルでモダンなラインを持ち、非常に人気があります。これは Mac では最高の Web フォントと考えられていますが、ヒント機能により Windows では表示が悪くなります。 セリフ: Georgia: 基本的に、本文表示に適したセリフフォントは Georgia です。ストロークは太く、セリフは明るく、アウトラインは大きく、小さなフォントは明瞭で、細部まで問題ありません。 中国語: Songti: Windows で最も一般的なフォントです。小さいフォントはドットマトリックス、大きいフォントは TrueType です。ただし、大きいフォントは見栄えがよくないので、タイトルには使用しない方がよいでしょう。 4. 小さなデモを作成し、さまざまなブラウザでテストしました。このフォントの解析には、ブラウザによってまだ違いがあります。 コードをコピー コードは次のとおりです。<!DOCTYPE HTML> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フォント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"/> <meta name="author" content="@my_programmer"> <スタイル タイプ="text/css"> /*リセット{*/ *{ パディング:0; マージン:0;} 画像{ 境界線:0;} li{ リストスタイル: なし;} /*} リセット */ div{フォントサイズ:1.2em;} </スタイル> </head> <本文> <br/> --Webフォントは一般的に5つのカテゴリに分けられます-- <div style="font-family: sans-serif;">Hello hello world sans-serif (サンセリフ) </div> <div style="font-family: serif;">Hello hello world serif (serif) </div> <div style="font-family: monospace;">Hello hello world monospace (monospace) </div> <div style="font-family: fantasy;">Hello world fantasy(ファンタジー) </div> <div style="font-family: cuisive;">Hello hello world cuisive (筆記体) </div> <br/> --サンセリフ-- <div style="font-family: Helvetica, sans-serif;">Hello hello world Helvetica </div> <div style="font-family: Arial, sans-serif;">Hello hello world Arial </div> <div style="font-family: 'Lucida Grande', sans-serif;">Hello hello world Lucida Grande </div> <div style="font-family: Verdana,sans-serif;">こんにちは、こんにちは世界 Verdana </div> <div style="font-family: Tahoma, sans-serif;">こんにちは、こんにちは世界 Tahoma </div> <div style="font-family: 'Trebuchet MS', sans-serif;">こんにちは、こんにちは世界 Trebuchet MS </div> <br/> -- セリフクラス -- <div style="font-family: Georgia, serif;">こんにちは、こんにちは世界 Georgia </div> <div style="font-family: Times, serif;">Hello hello world Times </div> <br/> --中国語フォント-- <div style="font-family: 宋体">Hello hello world 宋体</div> <div style="font-family: Microsoft YaHei">Hello world Microsoft YaHei</div> <div style="font-family: Chinese Thin Black">Hello hello world Chinese Thin Black</div> <div style="font-family: 黒体">Hello hello world 黒体</div> </本文> </html> Chromeに表示される結果 IE8で表示された結果 Firefoxに表示される結果 5. このテストでは、次のことがわかりました。 Android デバイスのブラウザはあまり強力ではありません (iOS はまだテストしていないので、それほど優れているとは思いません)。Android フォンのブラウザでサポートされている一般的なフォントは 3 つだけです。 sans-serif (サンセリフ) クラス: Arial; //sans-serif クラスに設定されていれば、どのフォントでも同じに見えます。 モバイルデバイス上のブラウザにはまだ改善の余地があります。 |
>>: CSS における @ の使用法の概要 (例と説明付き)
効果: <!doctypehtml> <html> <ヘッド> ...
目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...
データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...
結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...
電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...
MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...
この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...
Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...
1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...
目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...
1: ターミナルに入ったらPHPのバージョンを確認する php -v出力は次のようになります。 PH...