H5-ウェブフォントとフォントアイコン

あなたは使用することもできます。

https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index:ウェブフォント

https://www.iconfont.cn/collections/index?spm=a313x.7781068.0.0&type=3:フォントアイコン

ダウンロード

 

ダウンロードされたフォント、アイコンやWebフォントを使用することができます。例えば、これらのフォントをダウンロードする唯一の私の言葉は、Webフォントの効果を持っています

1.webフォント

1.1.html

 

1  <! - 第三段階:対応するテキストのスタイル- > 
2  < スパンクラス=「フォントのWeb」>
卒業前の最後のクラスでは、教師が生徒に語った:「私はあなたを見て。」

  私は教師がする、あきらめて、さよならを言うことを約思います「を見てください。」人生のああはい、道限り、しかし、教師は生徒に同行することができ、結局、道路の部分だけを歩きました。このセクションでは、ハード、説教、授業料、疑問であるすべては、この道を通過しなければなりません。学生はだけでなく、知識を習得するように、右に学生を導くために、だけでなく、生活や価値観で正しい見通しを確立すること;二重学生に気に、生徒たちは彼らと感じるようになるように無知からの学生の知識に、すべての生徒を教える教師知識と真理の獲得ではなく、教師の愛を得るだけでなく。

  「草の半分せず、心を保持することにする」これには、氏タオ氏タオの有名な人々有名な教育者であるので、先生の姿、先生もこの世界の真実となっています。しかし、また、ために心の、唯一の悲しみのシェア「私はあなたを見て」。

  もちろん、悲しみに加えて、希望があります。

  学生の先生にフレーズを言った示すように:「あなたが読んで見て、」

  先生のために、学生はさようなら振るしようとしています。教師は単語が短い愛は長く、学生は読書を見ていることを願っています:読んで見て、学生がより良い試験に対処するための知識でより堪能することができ、より確実に良い未来の道を取ります。

  バック教師と生徒、学生は最終的に、教師がそれらを与えることができ、移動する必要が悲しいですので、希望である、フル見て愛があります。

  私だけの思い出を楽しむために、卒業まで何年もの間、あまりにも強い感情を持っていたことがないとき、愛に満ち見て、私は、残念ながら、持っていたしなければなりません。例えば、私は小学校の先生がはるかに私を見て、私の名前を呼ぶためにするとき親戚を訪問する大学を卒業した後、北東に帰り、彼らは学生を教えてきたものの戻っていた見ることができたと言う、目いっぱいこれらの言葉は、ヘッドの教師とそれは誠実です。

  その後、私は戻って先生を見た場合、私はそれを認識することができ、自分自身に尋ねますか?行かないと思います。例えば、多くの年の私の中学校の語学教師は、私の携帯電話の番号についてトラスティ後、私に連絡することを、私はちょうど彼女は彼女が私の誇りに思うだろう、と私は言ったか知りたいですか?語学の先生が、その瞬間、私はケアのための同じ先生を持つことができることを恥の多くを移動するI以外の電話を受けましたか?これらすべての場合、それは1でなければなりません「の人はその珍しいと言うとき、」私たちの先生その愛、その悲しみと希望は、常に後に、それぞれの認識でした。

  教師は、彼らが学生の愛ことを見たときに、それぞれ、ということを知っています。

  教師は後に、それぞれ、知らない、と彼らはあるか、最終的には風光明媚な学生が永遠の時間として、心を愛するとなります。

  今日、理由は見てこの図の愛、それは私が文を教えた先生に言いたくなる:「!私は読書を見てみましょうしてください、私はあなたを見てみましょうください」を

21 </ スパン>

 

 

 

1.2.css

 

。1      <! -ウェブフォント- >
 2      <スタイル>
 3。         / * ステップ:フォントフェイスフォント声明使用して
 4を         自分のパスを変更覚え* / 
5。         フォントフェース@ {
 6。             フォントファミリ'WebFont' ;
 7              フォント表示スワップ ;
 8。             SRCURL( '../フォント/ webfont.eot') ; / * IE9 * / 
9              SRCURL( '../フォント/ webfont.eotの#iefix?')フォーマット( '-EmbeddedのOpenType')、/ * IE6-IE8 * / 
10             URL( '../フォント/ webfont.woff2 ')フォーマット( 'woff2')、
 11              URL(' ../フォント/ webfont.woff')フォーマット( 'WOFF')は、/ * Chromeは、Firefoxの* / 
12がある             URL (」../fonts/webfont.ttf ')フォーマット( 'のTrueType')、/ * クロム、Firefoxの、オペラ、サファリ、アンドロイド、iOSの4.2 + * / 
13は、ある             URL(' ../フォント/ webfont.svg#WebFont ')フォーマット(' SVG「) ; / * IOSの4.1- * / 
14          }
 15  
16          / * ステップ:使用されるスタイル定義webfont * / 
17          .webフォント {
 18は、             フォントファミリー"webfont」重要! 。
19              フォントサイズ16pxに20              フォントスタイルノーマル ;
21              -webkit-フォントスムージングアンチエイリアス22              -moz-OSX-フォントスムージンググレースケール23          }
 24  
25  
26  
27      </スタイル>

 

 

 

2.フォントのアイコン

2.1.html

 

1  <! - ステップ3:ページに適用され、フォントのエンコーディングを取得するには、アイコンを選択してください- > 
2  < スパンクラス= "IconFontスマイル" > </ スパン> 
3  < スパンクラス= "IconFontニュース" > </ スパン> 
4  < スパンクラス= "IconFont愛" > </ スパン> 
5  < スパンクラス= "マイIconFont" > </ スパン> 
6  < スパンクラス= "IconFont史" > </ スパン>
7  < スパンクラス= "追求iconfont" > </ スパン> 
8  < スパンクラス= "iconfontセット" > </ スパン>

 

 

 

2.2.css

 

1      <! -フォントのアイコン- >
 2      <スタイル>
 。3          / * 手順:以下の項目のフォントフェース@のコピーを生成* / 
。4          フォントフェイス@ {
 。5              フォントファミリ'IconFont' ;
 。6              SRCURL(」../フォント/ iconfont.eot ') ;
 7。             SRCURL( '../フォント/ iconfont.eotの#iefix?')フォーマット( '-EmbeddedのOpenType')、
 8。             URL(' ../フォント/iconfont.woff2 ')フォーマット(' woff2 ')
 。9              URL(' ../フォント/ iconfont.woff ')フォーマット(' WOFF ')、
 10              URL(' ../フォント/ IconFont。
TTF ')フォーマット('のTrueType ')、 11             URL( '../フォント/ iconfont.svg#iconfont ')フォーマット(' SVG') ;
12          }
 13  
14  
15          / * 第二步:定义使用iconfont的样式* / 
16          .iconfont {
 17              フォントファミリ! "iconfont"重要18              フォントサイズ16pxに19              フォントスタイルノーマル ;
20              -webkit-フォントスムージングアンチエイリアス21              -moz-OSX-フォントスムージンググレースケール22 
23              マージン1ピクセル24          }
 25  
26          / * 笑脸* / 
27          .smile ::前 {
 28              コンテンツ"\ e73d" 29              フォントサイズ30px ;
30  31          }
 32          / * 消息* / 
33          .news ::前 {
 34              コンテンツ"\のE740" 35             フォントサイズは50px ;
36  #CCC37          }
 38          / * 喜欢* / 
39          .love ::前 {
 40              コンテンツ"\のe742" 41          }
 42          / * 我的* / 
43          .MY ::前 {
 44              コンテンツ"\のe743" 45          }
 46          / * 历史* / 
47          .history ::前 {
48              コンテンツ"\のe745" 49          }
 50          / * 查找* / 
51          .seek ::前 {
 52              コンテンツ"\ e74b" 53          }
 54          / * 设置* / 
55          .SET ::前 {
 56              コンテンツ"\のe753" 57          }
 58  
59      </スタイル>

 

 

 

対応するフォントファイルから生成された1カスタムコンテンツ
2.ソース発生ネットワークウェブフォント
3
カスタムフォント定義
Bを。カスタムフォントを使用したカスタムスタイル
Cを。スタイルを指定して、スタイルの呼び出し

おすすめ

転載: www.cnblogs.com/FengBrother/p/11390553.html