@font-face (css3 属性) により、Web ページへの任意のフォントの埋め込みが可能になります_html/css_WEB-ITnose

@font-face 構文規則

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

1. YourWebFontName: この値は、ダウンロードしたデフォルトのフォントを使用することをお勧めします。 Web 要素内で参照されるファミリー。例: "font-family:"YourWebFontName";"

2. ソース: この値は、カスタマイズされたフォントのストレージ パスを指します。これは、相対パスまたは絶対パスにすることができます。

形式: この値は、次のようになります。 to はカスタマイズされたフォントの形式で、主にブラウザがそれを識別できるようにするために使用されます。その値には主に truetype、opentype、truetype-aat、embedded-opentype、avg などのタイプが含まれます。 : これら 2 つの値 誰もがよく知っているはずです。ウェイトはフォントが太字であるかどうかを定義し、スタイルは主に斜体などのフォント スタイルを定義します。

例: (SingleMalta Regular を例として取り上げます)

1. 必要なフォントをダウンロードします。

2. @font-face で必要な .eot、.woff、.ttf、.svg フォント形式のフォントを取得します。このウェブサイトでそれを行うことができます。クリックして (fontsquirrel) と入力します

3. Font Squirrel ファイルをローカル コンピューターにダウンロードし、解凍します。フォントを取得できます。

4. プロジェクト内に新しいフォルダー fonts を作成し、フォントをダウンロードしてその中に置きます。

スタイルの記述形式:

@font-face {   font-family: 'SingleMaltaRegular';      src: url('../fonts/singlemalta-webfont.eot');     src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),         url('../fonts/singlemalta-webfont.woff') format('woff'),      url('../fonts/singlemalta-webfont.ttf') format('truetype'),       url('../fonts/singlemaltawebfont.svg#SingleMaltaRegular') format('svg');   font-weight: normal;   font-style: normal;}?

引用できる最後のフォント:

body{  font-family: 'SingleMaltaRegular'}