CSS文本部分之字体样式[1]
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. 字体样式
font-style
属性
字体样式,可设置为斜体;
// 正常字体(默认)
.txt { font-style: normal; }
// 斜体
.txt { font-style: italic; }
// 偏斜字体
.txt { font-style: oblique; }
font-variant
属性
字体形变,是否显示为小型大写字母;
// 正常
.txt { font-variant: normal; }
// 小型的大写字母
.txt { font-variant: small-caps; }
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; }
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'; }