CSS外部フォントを導入するにはどうすればよいですか？ CSS外部フォントの導入入門

場合によっては、Web サイトのページに見栄えの良いフォントを使用する必要があります。結局のところ、見栄えの良いフォントを使用すると、ページ全体がより美しく、ユーザーにとってより魅力的に見えるようになります。これを実現するために、写真を使用することを考えることがあります。 -見た目のフォントですが、今日の この記事は、画像を使って見栄えの良いフォントを作る方法を紹介するものではなく、cssで外部フォントを導入する方法を紹介するものです。

さっそく本題に入りましょう~

CSS 外部フォントを導入するときに使用する必要があるのは、css3 の @font-face です。 @font- とは何ですか。顔？ 見てみましょう

@font-face は CSS3 のモジュールで、主に独自に定義した Web フォントを Web ページに埋め込みます。

まず、@font-face:

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family: b56f05174576c8edd94c4eb4b4ebc4ed : Custom の構文ルールを見てみましょう。フォント名 (通常はインポートされたフォント名に設定されます)、および後続のスタイル ルールはこの名前を通じてフォントを参照します。

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

注: 後にはローカル (フォント名) もあります。 src 属性フィールド。フォントがユーザー システムからロードされ、Web フォントが失敗後にのみロードされることを示します。

src: local(font name), url("font_name.ttf")

srouce : フォントの読み込みパス。絶対 URL または相対 URL を指定できます。

format : 主にブラウザの認識に使用されるフォント形式には、通常、truetype、opentype、truetype-aat、embedded-opentype、avg などのタイプが含まれます。

font-weight と font-style は以前に使用されていたものと同じです。

それでは、css外部フォント導入の実装方法を見ていきましょう:

まずはCSSでフォントを導入し、適当な名前を付けます。次のとおりです。

最初にフォントをダウンロードし、フォント ディレクトリに配置します。

font.css:

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

注:

fontname はフォント ファイルを表します。 name 名前

たとえば、フォント ファイルが php.ttf の場合、次のフォント名を定義するには、上記のすべてのフォント名を php

font-family に変更する必要があります。 src はフォント ファイルをロードする場所です。URL が複数あるのはブラウザの互換性の問題のためです。

2 番目のステップは、次のように定義したフォントを使用することです。

h1{font-family: fontnameRegular}

この記事はここで終わります。さらに興味深い内容については、php 中国語 Web サイトの関連チュートリアルの列に注目してください。 ！ ！ ！

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