CSS文本部分之字体样式[1]

标签：svg   before   code   默认   tor   ref   scala   图形   win   

1. 字体系列

[通用字体系列]

1. serif字体：带衬线字体，如Georiga、Times等
2. sans-serif字体：不带衬线字体，包括Arial、Geneva等
3. Monospace字体：等宽字体，包括Courier等
4. Cursive字体：手写字体，包括Author等
5. Fanstasy字体：无法归类，包括Western等

[特定字体系列]

//目前在图标字体中常见到这类字体出现
.icon { font-family: ‘iconfont‘; }

[默认字体系列]

//谷歌浏览器和欧朋浏览器
chrome/opera: 宋体
//火狐浏览器
firefox：微软雅黑
//微软的IE浏览器、苹果的Safari浏览器
IE/safari：Times，宋体

Tips：
//宋体为衬线字体，衬线字体常用于排版印刷
//微软雅黑为无衬线字体，无衬线字体常用于网页中

2. 字体样式

1. font-style属性

字体样式，可设置为斜体；

// 正常字体(默认)
.txt { font-style: normal; }
// 斜体
.txt { font-style: italic; }
// 偏斜字体
.txt { font-style: oblique; }

2. font-variant属性

字体形变，是否显示为小型大写字母；

// 正常
.txt { font-variant: normal; }
// 小型的大写字母
.txt { font-variant: small-caps; }

3. font-weight属性

字体粗细，可设置多个种值；

// 正常
.txt { font-weight: normal; }
// 粗体
.txt { font-weight: bold; }
// 更粗
.txt { font-weight: bolder; }
// 更细
.txt { font-weight: lighter; }
// 数值 可选：100/200/300/400(normal)/500/600/700(bold)/800/900
.txt { font-weight: 400; }

4. font-size属性

字体大小，支持多种类型的参数；

    //字体大小,可选如下
    //[绝对大小]:xx-small/x-small/small/media/large/
    //  x-large/xx-large
    //[相对大小]:smaller/larger
    //[其他大小]:
    //  em(相较于父元素font-size值)
    //  %(相较于父元素宽度)
    //浏览器默认字体大小:16px;
    //浏览器最小字体大小:
    //  chrome: 12px;
    //  opera: 9px;
    .txt { font-size: 14px; }

//字体家族,常用于图片字体
.txt { font-family: ‘iconfont‘; }

3. 自定义字体

//定义自定义字体(以iconfont为例)
@font-face {
    font-family: ‘iconfont‘;
    src: url(iconfont.eot);
    src: url(iconfont.woff);
    src: url(iconfont.ttf);
    src: url(iconfont.svg);
}
Tips(字体后缀说明)：
//eot: 微软的嵌入式字体(Embedded Open Type)
//woff: 网页开放字体格式(Web Open Font Format)
//ttf: windows和mac常用字体(True Type)
//svg: w3c制定的图形格式(Scalable Vector Graphics)

字体调用方式：
//在html中,以"&"+unicode编码+";"形式调用
<div> &24324; </div>
//在css中,以"\"+unicode编码形式调用
icon::before { content: ‘\2331‘; }

CSS文本部分之字体样式[1]

标签：svg   before   code   默认   tor   ref   scala   图形   win   

原文地址：https://www.cnblogs.com/juetan/p/13137645.html