ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS @font-face は Flash や PHP を使用せずに HTML にカスタム フォントを埋め込むことができますか?

CSS @font-face は Flash や PHP を使用せずに HTML にカスタム フォントを埋め込むことができますか?

Barbara Streisand
リリース: 2024-12-03 03:25:10
オリジナル
843 人が閲覧しました

Can CSS @font-face Embed Custom Fonts in HTML Without Flash or PHP?

HTML でのカスタム フォントのインストール

Q: CSS を使用して HTML でカスタム フォントを実装する

HTMLレイアウトにカスタムフォント(KG June Bug)を組み込む予定です。 Flash や PHP を使用せずに、CSS でこれを促進できますか?

A: カスタム フォント統合のための @font-face

CSS は、これに対処する @font-face 機能を提供しています。

でフォントを宣言します。 CSS:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
ログイン後にコピー

HTML でフォントを参照します:

<h3>
  font-family: Delicious, sans-serif;
</h3>
ログイン後にコピー

具体的な例を示します:

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>
ログイン後にコピー

JUNEBUG.TFF ファイルが次の場所に配置されていることを確認します。 HTML ファイルと同じディレクトリ。

追加ヒント:

フォントは、dafont.com などの Web サイトから入手できます。ダウンロードするフォントのライセンス条項を必ず読んで遵守してください。

以上がCSS @font-face は Flash や PHP を使用せずに HTML にカスタム フォントを埋め込むことができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート