想要使用可以在:

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

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

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

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

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

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

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

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

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

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

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

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

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

1.2.css

     <!--web字体-->
<style>
/*第一步:使用font-face声明字体
记得修改自己的路径*/
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('../fonts/webfont.eot'); /* IE9 */
src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/webfont.woff2') format('woff2'),
url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
} /*第二步:定义使用 webfont 的样式*/
.web-font {
font-family: "webfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} </style>

2.字体图标

2.1.html

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

2.2.css

     <!--字体图标-->
<style>
/*第一步:拷贝项目下面生成的 @font-face*/
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff2') format('woff2'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
} /*第二步:定义使用 iconfont 的样式*/
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; margin: 1px;
} /*笑脸*/
.smile::before{
content: "\e73d";
font-size: 30px;
color: red;
}
/*消息*/
.news::before{
content: "\e740";
font-size: 50px;
color: #ccc;
}
/*喜欢*/
.love::before{
content: "\e742";
}
/*我的*/
.my::before{
content: "\e743";
}
/*历史*/
.history::before{
content: "\e745";
}
/*查找*/
.seek::before{
content: "\e74b";
}
/*设置*/
.set::before{
content: "\e753";
} </style>
1.得自定义生成对应的字体文件的内容
2.使用网络源生成web字体
3.使用
a。定义自定义字体
b。定义样式使用自定义字体
c。指定样式,调用样式

h5-web字体和字体图标的更多相关文章

  1. CSS Web Fonts 网络字体

    Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...

  2. web页面引入字体

    一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...

  3. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  4. 手机H5 web调试利器——WEINRE (WEb INspector REmote)

    手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...

  5. 【转】notepad++设置字体和字体大小

    原文网址:http://www.aichengxu.com/view/604 今天很多朋友问我怎么设置notepad++的代码字体和代码字体的大小,习惯了editplus的朋友可能会在notepad+ ...

  6. WPF设置全局字体和字体嵌入

    原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...

  7. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  8. 修改 Delphi 10.3.3 IDE 字体和字体大小

    Delphi 10.2.2 之前,可以通过 IDE视觉设置的系统注册表项 修改字体和字体大小,因为 Delphi 10.2.2 IDE增加了主题,主题包含了字体信息, 此方法失效了.对于高分辨率屏幕, ...

  9. WPS for Linux 字体配置(字体缺失解决办法)

    WPS for Linux 字体配置(字体缺失解决办法) 1. 背景 有些linux装完wps后提示"部分字体无法显示"或"some formula symbols mi ...

  10. Jupyter Notebook 更改字体、字体大小、行高

    (废话):今天在做实验的时候遇到了一点问题,就问了问本科的室友,结果室友推荐我使用Jupyter Notebook来写代码,以前看其他同学使用过,但是一直在用Pycharm写,需要的时候顶多是Debu ...

随机推荐

  1. 0109 springboot的部署测试监控

    springboot的部署测试监控 部署 基于maven 打包 JAR 打包方式一般采用的jar包,使用springboot的默认方式即可: 使用maven命令: mvn clean package ...

  2. flutter安装中的一些方法

    1.配置flutter环境变量 进入终端 vim ~/.bash_profile export ANDROID_HOME=~Library/Android/sdk export PATH=$PATH: ...

  3. win上java1.7和1.8版本修改环境变量无效.md

    网上找了很多办法都没用. 解决办法: 看看自己 "系统环境变量" 中是不是有 "C:\ProgramData\Oracle\Java\javapath" 这项配 ...

  4. 安卓多个按钮使用一个OnClickListener

    安卓studio 3.1 版本编译通过 一个按钮id为bt1 一个按钮Id为bt2 mainactivity 代码入下 package com.example.vmpdump.firstapp; im ...

  5. JSONObject 和JSONArray基本使用

    1. 打包 JSONObject jsonObject = new JSONObject(); jsonObject.put("code", "200"); j ...

  6. python中的魔术属性与魔法方法

    1.魔法属性 · 1.1__doc__魔法属性  表示类的描述信息 class Fo: """ 这是今天第一个魔术属性__doc__""" ...

  7. HihoCoder第八周:状态压缩 一

    1044 : 状态压缩•一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车前 ...

  8. 2 —— js语法 —— 对象和方法的声明 。变量提升。闭包

    一,声明对象 var obj1 = {}; var obj2 = {name:'kk',age:18,fun:function{          // name,age,fun为对象的属性,只是属性 ...

  9. Java笔记: protected的真正含义

    关于protected关键字,即使是Java初学者也能够说出它的含义:protected修饰的成员可以被子类访问.但是这样理解并不完全准确,下面考虑它的真正含义. Java访问控制回顾 Java语言定 ...

  10. 五十九、SAP中常用预定义系统变量

    一.SAP中常用预定义系统变量 内容如下: 二.系统变量定义在结构SYST里,我们打开SE38 三.在代码编辑器输入SYST变量 四.双击SYST,来到这个系统结构,里面有很多系统变量 五.我们随便写 ...