字体

• 通过font-family可以指定标签中文字使用的字体。

• 例如：

p{font-family:Arial}

上边这行代码指定了p标签中使用名为arial作为字体

• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。

• 通过font-family可以同时指定多个字体。

• 例如：

p{font-family:Arial , Helvetica , sans-serif}

• 如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

• 这里面sans-serif并不是指的具体某一个字体，而是一类字体。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* font-face可以将服务器中的字体直接提供给用户去使用（当用户电脑没有安装指定的字体时） 问题：1.加载速度2.版权3.字体格式*/@font-face {/* 指定字体的名字 */font-family:'myfont' ;/* 服务器中字体的路径  format("truetype")：指定字体的格式，一般可不写*/src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");}p{/* 字体相关的样式 color 用来设置字体颜色font-size 字体的大小和font-size相关的单位em 相当于当前元素的一个font-sizerem 相对于根元素的一个font-sizefont-family 字体族（字体的格式）可选值：serif  衬线字体sans-serif 非衬线字体monospace 等宽字体- 指定字体的类别，浏览器会自动使用该类别下的字体- font-family 可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif*/color: blue;font-size: 40px;         /* font-family: 'Courier New'（有引号是因为中间有空格）, Courier, monospace; */font-family: myfont;}</style>
</head>
<body><p>今天天气真不错，Hello Hello How are you！</p>
</body>
</html>

字体的样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">          .p1{/*设置字体颜色,使用color来设置文字的颜色*/color: red;/** 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同   * */font-size: 30px;/** 通过font-family可以指定文字的字体*     当采用某种字体时，如果浏览器支持则使用该字体，*      如果字体不支持，则使用默认字体* 该样式可以同时指定多个字体，多个字体之间使用,分开*   当采用多个字体时，浏览器会优先使用前边的字体，*      如果前边没有在尝试下一个*//*font-family: arial , 微软雅黑;*//** 浏览器使用的字体默认就是计算机中的字体，*    如果计算机中有，则使用，如果没有就不用* * 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。*//*font-family: 华文彩云 , arial , 微软雅黑;也可以设置face表示字体，例如face="仿宋"*/              font-family: "curlz mt";              }           </style></head><body>     <p class="p1">我是一个p标签，ABCDEFGabcdefg</p>      </body>
</html>

字体的其他样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">          .p1{color: red;font-size: 30px;font-family: "微软雅黑";/** font-style可以用来设置文字的斜体*     - 可选值：*      normal，默认值，文字正常显示*        italic 文字会以斜体显示*        oblique 文字会以倾斜的效果显示*    - 大部分浏览器都不会对倾斜和斜体做区分，*       也就是说我们设置italic和oblique它们的效果往往是一样的*  - 一般我们只会使用italic*/font-style: italic;/** font-weight可以用来设置文本的加粗效果：*      可选值：*            normal，默认值，文字正常显示*            bold，文字加粗显示* *   该样式也可以指定100-900之间的9个值，*      但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果*      也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的*/font-weight: bold;/** font-variant可以用来设置小型大写字母*         可选值：*            normal，默认值，文字正常显示*            small-caps 文本以小型大写字母显示* * 小型大写字母：*       将所有的字母都以大写形式显示，但是小写字母的大写，*            要比大写字母的大小小一些。*/font-variant: small-caps ;}.p2{/*设置一个文字大小*/font-size: 50px;/*设置一个字体*/font-family: 华文彩云;/*设置文字斜体*/font-style: italic;/*设置文字的加粗*/font-weight: bold;/*设置一个小型大写字母*/font-variant: small-caps;}.p3{/** 在CSS中还为我们提供了一个样式叫font，*  使用该样式可以同时设置字体相关的所有样式,*  可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开* * 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，*  如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式*     大小必须是倒数第二个样式* * 实际上使用简写属性也会有一个比较好的性能*/font: small-caps bold italic 60px "微软雅黑";}                      </style></head><body><p class="p3">我是一段文字，ABCDEFGabcdefg</p><p class="p1">我是一段文字，ABCDEFGabcdefg</p><p class="p2">我是一段文字，ABCDEFGabcdefg</p></body>
</html>

字体分类

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体的分类</title><style type="text/css">p{font-family: arial , 微软雅黑 , 华文彩云 , serif;}</style></head><body><!-- 在网页中将字体分成5大类：serif（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive （草书字体）fantasy （虚幻字体）以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。一般会将字体的大分类，指定为font-family中的最后一个字体    --><p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p><p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p></body>
</html>

斜体和粗体

font-style用来指定文本的斜体。

– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal

font-weight用来指定文本的粗体。

– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

文字大小

font-size用来指定文字的大小。

小型大写字母

• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

– font-variant:small-caps

<p style=" font-variant: small-caps">abcABC</p><!-- font-variant可以用来设置小型大写字母*      可选值：*            normal，默认值，文字正常显示*            small-caps 文本以小型大写字母显示
-->

字体的简写属性

• font可以一次性同时设置多个字体的样式。

• 语法：

– font:加粗斜体小型大写大小/行高字体

• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{border: 1px red solid;/* font 可以设置字体相关的所有属性语法：font: 字体大小/行高 字体族行高 可以省略不写 如果不写使用默认值           *//* font-size: 50px;font-family: 'Times New Roman', Times, serif; */font-weight: bold;/* font: 50px/2  微软雅黑, 'Times New Roman', Times, serif; *//* font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif; */font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;/* font:50px 'Times New Roman', Times, serif;line-height: 2; *//* font-size: 50px; *//* font-weight 字重 字体的加粗 可选值：normal 默认值 不加粗bold 加粗100-900 九个级别（没什么用，因为计算机字体基本上没有这么多字体，基本上资源normal和bold，设置100~500粗细是一样的）font-style 字体的风格normal 正常的italic 斜体*//* font-weight: bold; *//* font-weight: 500;font-style: italic; */}</style>
</head>
<body><div>今天天气真不错 Hello hello</div></body>
</html>

图标字体Font Awesome

Font Awesome的下载

1.我们前往官网：https://fontawesome.com/ ，我们下载免费版

2.点击“download”

3.点击下载font awesome免费版为网站

4.解压目录如下：

5.将css和webfonts目录复制到你的项目当中，注意这两个文件夹要放在同一级目录下，我们新建一个目录将他们复制过去即可

6.之后在网页中引入css文件夹里的all.css（代码未经过压缩的）文件，引入all.min.css（代码压缩过的）也可，此处我们为了学习，引入未被压缩过的all.css文件

7.之后我们就可以在网页中使用Font Awesome图标字体

Font Awesome的使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./fa/css/all.css">
</head>
<body><!-- 图标字体（iconfont）- 在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活- 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入- 这样我们就可以通过使用字体的形式来使用图标fontawesome 使用步骤1.下载 https://fontawesome.com/2.解压3.将css和webfonts移动到项目中4.将all.css引入到网页中5.使用图标字体第一种方法：- 直接通过类名来使用图标字体,fas和fab这两大风格类的图标是免费的，其他还有fal、far、fad、fa 后面接的是具体图标的类名class="fas fa-bell"class="fab fa-accessible-icon"--><i class="fas fa-bell" style="font-size:80px; color:red;"></i><i class="fas fa-bell-slash"></i><i class="fab fa-accessible-icon"></i><i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./fa/css/all.css"><style>li{list-style: none;}li::before{/*  第二种方法：通过伪元素来设置图标字体1.找到要设置图标的元素通过before或after选中2.在content中设置字体的编码3.设置字体的样式(在引入的all.css文件中找)fabfont-family: 'Font Awesome 5 Brands';fasfont-family: 'Font Awesome 5 Free';font-weight: 900; *//*注意要加\*/content: '\f1b0';/* font-family: 'Font Awesome 5 Brands'; */font-family: 'Font Awesome 5 Free';font-weight: 900; color: blue;margin-right: 10px;}</style>
</head>
<body><!-- <i class="fas fa-cat"></i> --><ul><li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul><!-- 第三种方法：通过实体来使用图标字体：&#x图标的编码;--><span class="fas"></span></body>
</html>

更多使用和图标类名请查看官网：https://fontawesome.com/v5.15/icons?d=gallery&p=2

图标字体iconfont

1.我们到iconfont官网：https://www.iconfont.cn/ 选择想要的图标进行添加入库

2.当我们选好图标之后，点击购物车

3.我们可以添加至项目，或者直接下载代码或素材

4.此处我们点击添加至项目，需要我们先创建一个项目

5.之后就可在项目中管理

6.我们选择“下载至本地”

7.解压目录如下：

8.我们可以在demo_index.html中查看具体字体图标使用方法，然后我们直接将整个文件夹复制到我们的项目中（demo.css和demo_index.html可以删除）

9.之后在网页中引入iconfont.css即可使用

10.示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!--引入iconfont下载后解压的文件--><link rel="stylesheet" href="./iconfont/iconfont.css"><style>i.iconfont{font-size: 100px;}/*第三种方法：通过伪元素，实体在下载后的html文件中去找（复制&#x之后的元素），注意加\*/p::before{content: '\e625';font-family: 'iconfont';font-size: 100px;}</style>
</head>
<body><!--第一种方法：通过实体，代码在下载后的html文件中去找--><i class="iconfont"></i><i class="iconfont"></i><i class="iconfont"></i><!--第二种方法：通过类名，类名在下载后的html文件中去找--><i class="iconfont icon-qitalaji"></i><p>Hello</p>
</body>
</html>

喜欢请关注我

至此，我们的HTML字体以及图标字体iconfont、Font Awesomed的使用就讲解完毕了。喜欢我的话可以关注我的微信公众号我爱学习呀嘻嘻，不定期分享各类资源哦。

HTML字体以及图标字体iconfont、Font Awesome的使用相关推荐

字体、图标字体、行高、文本样式（css）
字体.图标字体.行高.文本样式(css) 字体相关的样式 color 用来设置字体颜色 font-size (字体大小) 相关单位 em 相当于当前元素的一个font-size rem 相当于根元素的 ...
iconfont 图标转为字体_iconfont图标字体
一.iconfont的优缺点优点矢量性屏幕适配(缩放) 字体性样式控制(颜色,阴影,甚至浮雕) 文件小一般20-50KB,比图片小很多,例如typicons库有308个icon,字体文件大小 ...
python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选.但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义.为自己 ...
CSS字体和图标字体
目录一字体font 二图标字体三阿里巴巴iconfont图标字体使用方法一字体font 字体相关的样式: color:用来设置字体的颜色:严格意义上color设置前景色,一般都是这样设置 ...
Css之字体渐变（包括iconfont font class）
/** iconfont图标 */ .iconfont {background: linear-gradient(-45deg, #0096ff, #00dcd2); // iconfont图标渐变b ...
最新的超棒免费图标字体(icon font)收集
为什么80%的码农都做不了架构师?>>> 日期:2012-8-29 来源:GBin1.com 今天我们收集了18套非常有特色的免费图标字体给大家,如果能够将它们应用到你的用户 ...
引入图标字体的三种方式
图标字体(iconfont) ------我们在网页中会发现一些小图标,可以通过图片引入图标,但是图片本身比较大,应用起来非常的不灵活.所以在这里给小伙伴们介绍一个叫"图标字体"的 ...
01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
WordPress为导航菜单添加个性图标字体
目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大.特别是一些响应式设计的主题模板,都会或多或少使用图标字体.我所经常用的wordpress主题就可以自定义图 ...

HTML字体以及图标字体iconfont、Font Awesome的使用

字体