其他分享
首页 > 其他分享> > h5-web字体和字体图标

h5-web字体和字体图标

作者:互联网

想要使用可以在:

https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index  :是web字体

https://www.iconfont.cn/collections/index?spm=a313x.7781068.0.0&type=3    :是字体图标

下载

 

字体图标和web字体都是下载了那个那个可以用:比如这些字体只有我下载的这几个字才有web字体的效果

1.web字体

1.1.html

 

 1 <!--第三步:为文字加上对应的样式 -->
 2 <span class="web-font">
毕业前最后一节课,老师对学生说:“我再看看你们。”

  即将说再见,老师不舍,要“再看看”。是啊,人生路那么漫长,可老师能陪伴学生走过的,终究只有一段路。这段路是艰辛的,传道、授业、解惑,都是这条路上必经。老师要对学生们倾囊相授,让学生从不知到知之;要对学生正确引导,让学生不仅学会知识,还要树立正确的人生观、价值观;要对学生倍加关怀,让学生感觉到他们不仅在获得知识,寻求真理,更在得到老师的爱。

  “捧着一颗心来,不带半根草去”,这是著名人民教育家陶行知先生的名言,陶行知先生如此,图中的老师如此,普天之下的老师也莫不如此。也因着这一颗心,才有了“我再看看你们”的那份不舍。

  当然,除了不舍,还有希冀。

  正如图中老师对学生说的那句:“你们再看看书。”

  对于老师而言,即将挥手作别的是学生。老师希望学生再看看书,字短情长:再看看书,学生们才能更熟练地掌握所学知识,更好地应对考试,更稳健地走好未来的路。

  师生一回,学生们终究要远行,老师能给他们的,是不舍,是希冀,是一场充满爱的目送。

  这样充满爱的目送,我一定是拥有过的,可惜的是,在我拥有的时候不曾有太强烈的感受,直到毕业多年,才在回忆中享用。譬如我在大学毕业后回东北故乡探亲的时候,小学班主任远远看见我并喊我名字,说看背影也看得出是自己曾经教过的学生,说这些话的时候,班主任老师眼里满是真挚。

  那之后我在反问自己,如果是我远远看到老师的背影,我认得出么?恐怕不能。譬如我的初中语文老师在多年之后托人打听我的手机号码,同我联系,只是想知道我过得怎么样,她说她会为我骄傲,而我呢?接到语文老师电话那一刻,我除了感动,更多的是羞愧,我可能对老师也有一样的牵挂?上述种种,应了一句“当时只道是寻常”,老师对我们那份爱,那份不舍与希冀,总是在分别之后,才被感知。

  老师们知道的,是分别时,他们对学生们那一场爱的目送。

  老师们不知道的,是分别后,他们也正在或终将成为学生们心中一道爱的风景,随着时光永恒。

  今天,因着图中这一场爱的目送,也让我想对曾经教过我的老师说一句:“请让我再看看书,也请让我再看看您!”

21 </span>

 

 

 

1.2.css

 

 1     <!--web字体-->
 2     <style>
 3         /*第一步:使用font-face声明字体
 4         记得修改自己的路径*/
 5         @font-face {
 6             font-family: 'webfont';
 7             font-display: swap;
 8             src: url('../fonts/webfont.eot'); /* IE9 */
 9             src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
10             url('../fonts/webfont.woff2') format('woff2'),
11             url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
12             url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
13             url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
14         }
15 
16         /*第二步:定义使用 webfont 的样式*/
17         .web-font {
18             font-family: "webfont" !important;
19             font-size: 16px;
20             font-style: normal;
21             -webkit-font-smoothing: antialiased;
22             -moz-osx-font-smoothing: grayscale;
23         }
24 
25 
26 
27     </style>

 

 

 

2.字体图标

2.1.html

 

1 <!--第三步:挑选相应图标并获取字体编码,应用于页面-->
2 <span class="iconfont smile"></span>
3 <span class="iconfont news"></span>
4 <span class="iconfont love"></span>
5 <span class="iconfont my"></span>
6 <span class="iconfont history"></span>
7 <span class="iconfont seek"></span>
8 <span class="iconfont set"></span>

 

 

 

2.2.css

 

 1     <!--字体图标-->
 2     <style>
 3         /*第一步:拷贝项目下面生成的 @font-face*/
 4         @font-face {
 5             font-family: 'iconfont';
 6             src: url('../fonts/iconfont.eot');
 7             src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
 8             url('../fonts/iconfont.woff2') format('woff2'),
 9             url('../fonts/iconfont.woff') format('woff'),
10             url('../fonts/iconfont.ttf') format('truetype'),
11             url('../fonts/iconfont.svg#iconfont') format('svg');
12         }
13 
14 
15         /*第二步:定义使用 iconfont 的样式*/
16         .iconfont {
17             font-family: "iconfont" !important;
18             font-size: 16px;
19             font-style: normal;
20             -webkit-font-smoothing: antialiased;
21             -moz-osx-font-smoothing: grayscale;
22 
23             margin: 1px;
24         }
25 
26         /*笑脸*/
27         .smile::before{
28             content: "\e73d";
29             font-size: 30px;
30             color: red;
31         }
32         /*消息*/
33         .news::before{
34             content: "\e740";
35             font-size: 50px;
36             color: #ccc;
37         }
38         /*喜欢*/
39         .love::before{
40             content: "\e742";
41         }
42         /*我的*/
43         .my::before{
44             content: "\e743";
45         }
46         /*历史*/
47         .history::before{
48             content: "\e745";
49         }
50         /*查找*/
51         .seek::before{
52             content: "\e74b";
53         }
54         /*设置*/
55         .set::before{
56             content: "\e753";
57         }
58 
59     </style>

 

 

 

1.得自定义生成对应的字体文件的内容
2.使用网络源生成web字体
3.使用
a。定义自定义字体
b。定义样式使用自定义字体
c。指定样式,调用样式

标签:web,..,url,fonts,iconfont,h5,字体,webfont,font
来源: https://www.cnblogs.com/FengBrother/p/11390553.html