cssにカスタムフォント(font-face)を導入する方法

2140 ワード

なぜこれを使うのか、ポスターを作ることから言えば、それは風雨が入り交じる夜だった...では、冗談を言わないで、私たちは本題に戻って、どうして彼を使って、ブラウザにフォントがないからです.どうして君に言ったんだ?私は自分でw 3 cschoolに行って勉強することはできません.いいですが、もっと簡単に提供してあげるのではないでしょうか.
使用方法
@font-face{
     font-family: '       '; 
     src: url('../font/    .eot');
     src:url('../font/    .woff') format('woff'),
         url('../font/    .ttf') format('truetype'),
         url('../font/    .svg') format('svg');
}

//html        h1     ,             

h1{font-size:36px; color:#ccc;font-family: "       ";}

ここまで来て下さってありがとうございました(ああ、卵や白菜を捨てないでくれませんか、続けて言います);
1、どこでフォントを見つけられるかがポイントですが、私は使いますが、フォントを使わないのはやはり卵ですね.
フォントのダウンロード:https://www.fontke.com/ここでは、一般的に私たちのシステムでサポートされているフォントをダウンロードしてfontフォルダに置くことができます(fontフォルダはcssとimagesと平レベルでいいです)
2、ダウンロードしたフォントが大きすぎて、性能性能を失ってしまった(話は別として少なくない)
解决方案:字クモ(字体の必要な部分を抽出することができて、普通は数kで、このようにすることができます)字クモの公式サイト:http://font-spider.org/
1)ワードクモを使うにはまずnodeやgitをインストールしてもいいですが、先端としてはこれで大丈夫です.
2)インストールが完了したら、クモのインストールを開始し、コマンドラインまたはgitでコピーします.npm install font-spider-gタオバオでミラーリングしてもいいです.
3)長い間待っていましたが、インストールが終わったらfont-spider-Vを検出してバージョン番号が表示され、インストールに成功したことを証明することができます.Nice.
4)あなたがダウンロードした多くの兆のフォントを先に私たちがさっき言ったfontフォルダに入れてください.
5)CSSスタイルシートを新規作成し、フォントを定義し、下のものをコピーし、fontに名前を付けたばかりのフォント名を入力すると、フォントの様々なフォーマットが定義されます.
@font-face{
     font-family: '       '; 
     src: url('../font/    .eot');
     src:url('../font/    .woff') format('woff'),
         url('../font/    .ttf') format('truetype'),
         url('../font/    .svg') format('svg');
}

//html        h1     ,             

h1{font-size:36px; color:#ccc;font-family: "       ";}

6)重要なステップは、自分の必要な略語を生成することです.gitまたはnodeにfont-spider+スペース+パスを入力します.font-spider./demo/*.html例:
             font-spider demo.html
 
font-spider C:\Users\13246\Desktop\cropper\demo.html

もちろん、これはプレゼンテーションです.具体的には、あなたのパソコンの経路を見てみましょう.
本明細書の統合は次のとおりです.https://blog.csdn.net/amihui/article/details/53023358