其实字体我们都会觉得它是一个小case,但是看了字体的详细文档,发现其实有些东西一直被我们忽略了,记录一些干货。
font-family:\5B8B\4F53,Arial Narrow,arial,serif;
上面这一段来自网易代码,第一次看到这个的时候很懵,不知道 \5B8B\4F53 代表什么,后来发现这个其实就是代表的是 宋体 其实直接写宋体也是可以的,但是中文在一些情况下会带来兼容性的问题,所以就写成这样了
字体名称属性(font-family)
就是设置是 什么字体
字体大小属性(font-size)
字体风格属性(font-style)
这个属性有三个值可 选:normal, italic, oblique。normal是缺省值,italic, oblique都是斜体显示。
字体浓淡属性(font-weight)
font-weight属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值(我的魅族MX6手机上在字体设置为 无衬线字体sans-serif 时候 就只有normal和bold)
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight (mdn讲解font-weight)
英文字体大写属性(font-variant)
这个属性是把小写字体设置为 小大写,这个小大写就是字母是大写的,但是字号偏小(css1的属性,基本没有什么卵用)
实用的 大小写转换
text-transform: uppercase; /*英文字体大写*/
text-transform: lowercase; /*英文字体小写(默认就是这个)*/
text-transform: capitalize; /*英文首字母大写*/
2、字体行高和字间距
word-spacing : 单词与单词之间的间距
letter-spacing:字母与字母,和汉字与汉字
line-hight:1.2 (用这样表示自己大小的倍数),这样还比较好
3、文字两端对齐
<p>我爱中国</p>
<p>啦啦啦</p>
p{
width: 100px;
font-size: 20px;
text-align: justify;
text-align-last: justify;
background-color: red;
}
3、设置了letter-spacing之后,text-align 就不居中了
加一个text-indent 属性并且把值设置成和letter-spacing一样 就可以了
text-indent属性本来是 设置段落的缩进值的。
letter-spacing: 100px;
text-indent: 100px;
text-align: center;