ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで外部フォントファイルを読み込む方法

CSSで外部フォントファイルを読み込む方法

青灯夜游
青灯夜游オリジナル
2021-11-10 16:01:428852ブラウズ

CSS では、「@font-face」ルールを使用して外部フォント ファイルを読み込むことができます。構文 @font-face {font-family: フォント名; src: url (外部フォント ファイル パス); [font -weight: 太さの値];[font-style: スタイルの値];}".

CSSで外部フォントファイルを読み込む方法

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5バージョン、Dell G3 コンピューター。

CSS では、「@font-face」ルールを使用して外部フォント テキストを読み込むことができます。

@font- face は、主にユーザー定義の Web フォントを Web ページに埋め込む CSS3 のモジュールです。

@font-face ルールを使用することにより、Web デザイナーはいかなる種類の「ネットワーク セキュリティ」も使用する必要がなくなります。 " Font.

@font-face ルールでは、まずフォント名 (myFirstFont など) を定義してから、フォント ファイルを指定する必要があります。

構文規則@font-face:

@font-face {
      font-family: 字体名称;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }
  • font-family: フォント名: カスタム フォント名 (通常は導入されたフォント名に設定されます)。後続のスタイル ルールで使用されるフォントを参照する名前

  • src : フォントの読み込みパスと形式を設定します。複数の読み込みパスと形式はカンマで区切ります

    srouce : フォントの読み込みパス (絶対 URL または相対 URL にすることができます)

    format : フォントの形式は、主にブラウザの識別に使用され、一般に次のタイプがあります - truetype 、opentype、truetype-aat、embedded-opentype 、avg など

css で外部フォント ファイルを使用する方法

1. まず、 、フォントをダウンロードし、フォント ディレクトリ

2 に置きます。@font-face ルールを使用してフォントを導入し、適切な名前を付けます

@font-face {
 font-family: &#39;fontnameRegular&#39;;
 src: url(&#39;fontname.eot&#39;);
 src: local(&#39;fontname Regular&#39;),
        local(&#39;fontname&#39;),
        url(&#39;fontname.woff&#39;) format(&#39;woff&#39;),
        url(&#39;fontname.ttf&#39;) format(&#39;truetype&#39;),
        url(&#39;fontname.svg#fontname&#39;) format(&#39;svg&#39;);
}

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

h1{font-family: fontnameRegular}

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで外部フォントファイルを読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。