webfont的使用的方法

伪元素 ::before and ::after的作用，如何通过css 自定义生成图标

本文借鉴了寻找薛定谔的猫的博客

区分伪元素和伪类

常见的伪元素： ::first-letter, ::first:line, ::before, ::after, ::selection

常见的伪类： :hover, :link, :active, :target, :not(), :focus

注意一点： ::before 和 ::after中有特殊的content,可以用来在css渲染中向元素逻辑上的头部或者微博添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

WebFont

定义： **在css里面，如果想使用某个字体，但是又担心用户电脑上没有，就可以使用font-face属性从服务器上引用这组字体。**使用方法请看下面的实例。

使用WebFont

创建一个html界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./show-icon.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="show-icon">test</i>
</body>
</html>

创建一个名为show-icon.css的css文件。

.show-icon::before{
    content: '\2649';  
}
.show-icon{
    font-size: 60px;
    color: green;
}

这里注意content: “\2649"这里其实是一个16进制的unicode编码，可以看作一个字符，比如看成"我”（解释不太清晰，其实\2649这里就是一个图标的unicode，如果换成汉字的unicode编码放在这里结果就会显示出汉字）。
在Unicode字符集里面，除了系统中存在的，还有E000到F8FF属于我们自己添加字体元素的地方，可以在这些地方随意定义我们自己的字符形状。

这里浏览上面的html会出现如下的结果：

html显示的结果

这里test前面的图标对应的就是"\2649"

伪元素 ::before and ::after的作用，如何通过css 自定义生成图标

区分伪元素和伪类

WebFont

使用WebFont

推荐网上免费的webfont icon：