ホームページ > 記事 > ウェブフロントエンド > CSSで外部フォントファイルを読み込む方法
CSS では、「@font-face」ルールを使用して外部フォント ファイルを読み込むことができます。構文 @font-face {font-family: フォント名; src: url (外部フォント ファイル パス); [font -weight: 太さの値];[font-style: スタイルの値];}".
このチュートリアルの動作環境: 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: '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'); }
3. 定義したばかりのフォントを使用します
h1{font-family: fontnameRegular}
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで外部フォントファイルを読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。