HTML字体转为大写,css字体属性和英文大小写转换

其实字体我们都会觉得它是一个小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、文字两端对齐

文字两端对齐.png

我爱中国

啦啦啦

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;