HTML中字体和字体图标的应用

1.字体应用

HTML中应用字体要用到font-fanily属性，定义一个名字，把要用到的字体.ttf格式下载到本地，用src属性使用字体。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体的应用</title><style>@font-face {font-family:my font;                 /*设置字体*/src: url(./方正硬笔行书简体.ttf);     /*字体的链接*/}p{font-family: my font;                /*属性值与上一个一致*/font-size:50px;                      /*设置字体大小*/             }</style>
</head>
<body><p>你好世界！</p>
</body>
</html>

预览：

关于字体的其他属性：

font-style 用于打开和关闭斜体

normal 【默认】正常字体，关闭斜体

italic 斜体

oblique 模拟斜体

font-weight 控制字体的粗细程度

normal 【默认】正常,400

bold 加粗字体,700

lighter 设置当前元素字体比父元素更细

bolder 设置当前元素字体比父元素更粗

100–900 数值类型的粗细程度（值越大字体越粗）

text-align 文本的排列方式

left 左对齐

center 居中

right 右对齐

text-transform 允许字体改变，文本变形

none 防止任何改变

uppercase 将文本转换为大写

lowercase 将文本转换为小写

capitalize 将所有单词第一个字母转换为大写

full-width 转换为类似于一个等宽字体

text-decoration 设置或者取消文本修饰

速写属性 line style color

2.字体图标的应用

HTML中应用字体图标来自字体图标库：iconfont-阿里巴巴矢量图标库

常用方法一：

1.选中一个图标，加入到购物车，点进购物车，添加到项目（若没有就新建一个），然后点击确定。

2.点击unicde，查看在线链接。

3.点击更新代码，复制代码。

4.粘贴到html中head标签里，style属性中，url里的链接注意要加https:

复制篮球下面的代码粘贴到body标签里的span标签里

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体的应用</title><style>@font-face {font-family: 'iconfont';  /* Project id 2721190 */src: url('https://at.alicdn.com/t/font_2721190_fg07hn218k.woff2?t=1629447137820') format('woff2'),    /*url中的链接，在//前面要加https:*/url('https://at.alicdn.com/t/font_2721190_fg07hn218k.woff?t=1629447137820') format('woff'),url('https://at.alicdn.com/t/font_2721190_fg07hn218k.ttf?t=1629447137820') format('truetype');}.iconfont{font-family: iconfont;    /*与上面的font-family名字一致*/color:red;                     /*赋予颜色*/font-size: 50px;}              /*字体大小*/</style>
</head>
<body><span class='iconfont'></span>  /*class属性名可以更改*/
</body>
</html>

预览：

常用方法二：

步骤1同上。

2.点击font class，查看在线链接，复制代码。

3.粘贴到html的head标签中，用link标签引入，url的连接中注意加https:

将篮球下面的代码复制到body中的sapn标签里的class属性中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体的应用</title><link rel="stylesheet" href="https://at.alicdn.com/t/font_2721190_fg07hn218k.css">
</head>
<body><span class="iconfont icon-lanqiu"></span>  /*class属性名中iconfont不变，icon-lanqiu是图标的代码*/
</body>
</html>

预览：