标签：fonts border 指定 code 声明 工作 文件解压 pen 编码
1、CSS引用文件字体
准备工作：将字体文件解压放于fonts文件夹中，字体文件通常有eot、svg、ttf、woff四种格式
CSS声明字体引用：
@font-face { font-family: test; src: url(‘../fonts/test.eot‘) format(‘embedded-opentype‘), url(‘../fonts/test.svg‘) format(‘svg‘), url(‘../fonts/test.ttf‘) format(‘truetype‘), url(‘../fonts/test.woff‘) format(‘woff‘); }
CSS设置字体为文件字体：
.example{ font-family: test; font-style: normal; }
假如使用的是字体图标，字体图标会有自己的编码，如果把字体图标放在伪元素中，则代码如下：
.example::before{ content: ‘\e958‘; //字体图标编码作为伪元素的内容 font-size: 13px; }
2、CSS选择器巧用
2.1、使用兄弟选择器
假如ul中并排的n个块级元素li，要设置相邻元素的间隔线，可使用以下代码：
//相邻兄弟选择器选择紧接在另一个元素后的元素，而且二者有相同的父元素，会循环查找 ul>li+li{ border-left:1px solid #ccc; } //通用兄弟选择器选择指定元素的后面的所有兄弟结点，该情景下相邻兄弟选择器性能较好
ul>li~li{ border-left:1px solid #ccc; }
2.1、使用属性选择器
假如要匹配使用了test-开头的类，如class="test-1"、class=" test-2"、class="start test-3"...使用以下代码以匹配多种情况
[class^="test-"],[class*=" test-"]{ ··· }
标签：fonts border 指定 code 声明 工作 文件解压 pen 编码
原文地址：https://www.cnblogs.com/chuanzi/p/9571624.html
