ホームページ > 記事 > ウェブフロントエンド > css3 @font-face_html/css_WEB-ITnose
css3 @font-face_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:331304ブラウズ
長い間、Web デザイナーは常に「Web セーフ」フォントを使用する必要がありましたが、@font-face がサーバー側のフォント ファイルをロードできるようになり、ユーザーのコンピュータにインストールされていないフォントをブラウザで表示できるようになりました。 。
原則は、フォント ファイルは Web サーバー上に配置され、必要に応じてユーザーのコンピュータに自動的にダウンロードされます。
1. @font-face の概要構文:
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } パラメーターの説明:
YourWebFontName: この値は、ダウンロードしたデフォルトのフォント名を使用することをお勧めします。 Web 要素の font-family 属性内。
source: カスタム フォントのストレージ パス。相対パスまたは絶対パスを使用できます。
format: カスタム フォントの形式を指し、主にブラウザがそれを識別できるようにするために使用されます。その値には次のタイプがあります: truetype、opentype、truetype-aat、embedded-opentype、avg など。
font-weight と font-style は、フォントが太字であるかどうかとフォント スタイルを定義します。
ブラウザ互換の書き込み:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } 2. 使用方法 1. 特別なフォントをダウンロードします
たとえば、フォント single-malta.font をダウンロードしたい場合、フォントのダウンロード リンクは
http:// www.dafont.com /single-malta.font
ダウンロードして解凍すると、ttf ファイルが表示されます。
2. サードパーティ ツールを使用して、@font-face に必要なフォント形式 (.eot、.woff、.ttf、.svg フォント形式) を生成します:
サードパーティ ツールのリンク: http:// www.fontsquirrel.com/ fontface/generator
具体的な手順は、最初の手順でダウンロードしたフォントを WEBFONT GENERATOR ページにアップロードし、ダウンロードして解凍します。
ダウンロードして解凍した後、フォルダーには多くの冗長なデモ ページと CSS が含まれていることがわかりました。必要なのは .woff、.ttf、.svg、および .eof の 4 つのファイルだけです。これら 4 つのファイルをサイトのフォント ディレクトリにコピーします。これで準備は完了です。
3. style.css に @font-face 関連のコードを追加します。
4. スタイルで font-familyl を使用できるようになりました。
コードは次のとおりです:
<style type="text/css">@font-face { font-family: 'SingleMaltaRegular'; src: url(fonts/singlemalta-webfont.eot); src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'), url(fonts/singlemalta-webfont.ttf)format('truetype'), url(fonts/singlemalta-webfont.woff)format('woff'), url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype'); font-weight: normal; font-style: normal;}h2.singleMalta { font-family: 'SingleMaltaRegular'}</style><body><h2>普通字体</h2><h2 class="singleMalta">single malta</h2></body> 効果:
Web ページに特殊なフォントをインポートするための @font-face 属性の詳細な説明
http://www.w3cfuns.com/ thread-5597432-1-1. html
フォントを入手する
http://www.google.com/fonts/
http://www.dafont.com/
サードパーティのフォント生成ツール
http ://www.fontsquirrel.com/fontface/generator