CSSに外部フォントを導入するにはどうすればよいですか? CSSフォントスタイルの設定方法（例）

ブラウザ表示では、ページ上のさまざまなフォント スタイルにより、ページの美しさが向上するだけでなく、ユーザーのブラウジングの対話性も向上します。では、これらのさまざまなフォント スタイルは CSS でどのように設定されるのでしょうか?この章では、CSS に外部フォントを導入する方法を説明します。 CSSフォントスタイルの設定方法（例）。困っている友人は参考にしていただければ幸いです。

1. font-family 属性の機能と使用法は何ですか?

1. font-family 属性の役割

font-family 属性を使用すると、CSS コードを使用してフォント スタイルを設定できます。ページ上のテキスト表示用例: Song Diagnostic、Microsoft Yahei など。 font-family 属性は、ページの表示をより調和して美しくするためにさまざまなフォントを設定します。

font-family 属性では、カンマで区切って複数の値 (フォント) を定義できます。ブラウザが最初のフォントをサポートしていない場合、ブラウザは認識されるまで次のフォントを試します。ブラウザは認識した最初の値を使用します。

2. font-family 属性の使用法

font-family:"设置字体名称";

例:

css コード:

.demo{ font-family:"微软雅黑";}

html コード:

<div class="demo">我是一段测试文字</div>

このようにして、デモ ボックス内のすべてのテキストが Microsoft Yahei フォント スタイルで表示されます。

2. CSS に外部フォントを導入するにはどうすればよいですか?

一般的なブラウザでよく使用されるフォントには、Song、Hei、Microsoft YaHei などがあります。 Web ページがロードされてフォントが選択されると、訪問者のシステム テキスト ライブラリのテキスト フォントが呼び出されるため、フォントが見つからない場合は、デフォルトの Web フォントが表示されます。誰もがインストールするオペレーティング システムにはデフォルトでこれらのフォントが含まれているため、これらのフォントはセーフ フォントとも呼ばれます。ただし、特別なニーズがある場合は、外部フォントを参照して、パーソナライズされた見栄えの良いテキスト スタイルを表示することができます。

CSS で外部フォントを導入する方法 (@font-face):

1.@font-face タグの導入

@font-face を使用すると、安全なフォントの制限を完全に取り除き、コンピューターにインストールされていないフォントを Web ページで使用できるようになります。ユーザーが Web ページをロードすると、フォント パッケージがユーザーのマシンに自動的にダウンロードされ、フォントが正しく表示されることが保証されます。

2. CSS に外部フォントを導入する手順

1) フォントを CSS に導入し、外部フォントの名前をカスタマイズします

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url('加载外部字体文件的文件地址'),  
    url('加载外部字体文件的文件地址'),
    url('加载外部字体文件的文件地址'); /* IE9 */
}

font - Family はフォントの名前を定義し、次の src はフォント ファイルがロードされる場所です。URL が複数あるのはブラウザの互換性の問題によるものです。

2) 定義したばかりのフォントを使用します

div {
    font-family: 用户自定义的字体名称;
}

コード例:

@font-face {
	 font-family: 'YaHei Consolas Hybrid';
	src: url('../fonts/yaheiconsolashybrid.ttf');
}

body {
	font-family: 'YaHei Consolas Hybrid';
	font-size: 16px;
}

ブラウザごとにフォントの形式が異なることを考慮します( ブラウザと互換性があります)

/*字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
*/
@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}

3. CSS に外部フォントを導入する利点:

@font の人気が続いているため-face を使用すると、Web フォントと呼ばれる多くの新しいフォント形式のアイコン セットが作成されます。これらの Web フォントには、通常の安全なフォントに比べて次のような利点があります。

1) ズームインまたはズームアウトしてもレンダリング効果に影響を与えず、ユーザー エクスペリエンスが良好です。 #2) 検索エンジンで認識できる;

3) 毎回再生成する必要がある画像とは異なり、追加と削除がより便利です。

以上がCSSに外部フォントを導入するにはどうすればよいですか? CSSフォントスタイルの設定方法（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。