前言
之前博客文章不成体系，主要是一些突然想到的零散知识点。本文及后面几篇文章，将推出一系列文章。帮忙梳理知识点。提高技能。本文着重讲解css有关文本处理font的那些事。之所以先从font说起，是因为UED对字体要求比较高，很多朋友还原UED设计稿之后，出来的效果，UED并不满意。其中，除了屏幕，自适应等原因之外，字体文本处理也是一个重要因素。
1、ex 实现文字和图标垂直居中
ex单位IE6时代就支持了，主要是相对字母x的高度,可以实现文字和图标对齐，不受文字字体和字号的影响。
如下图：
html
haorooms博客<i class="icon-row"></i>
css
.icon-row{
display: inline-block;
width:20px;
height:1ex;
background:url(row.png) no-repeat center;
background-size:contain
}2、font-size 0作用及错误用法
font-size：0的作用，我之前博客文章应该有提及。
1、可以清除字体引起的间距
2、可以将文本隐藏
不正确的用法：
看到有的网页中，用rem单位，为了方便计算（因为1rem =16px,16*0.625=10px,width:14px，可以写成width:1.4rem）。将根目录字体设置如下：
html{
font-size:62.5%}但是chrome浏览器最小字体12px的限制，根据字号计算，是12px不是10px，因此，计算就不是很准确了！
想真的是10px，可以如下设置：
html{
font-size:625%
}
font-size:14px = font-size:.14rem这样可能也有些问题，但是比上面的62.5%要正确多了！
3、font-family
"serif"// 衬线字体"sans-serif"//无衬线字体"cursive"//手写字体"fantasy"// 奇幻字体"monospace"// 等宽字体"system-ui" //系统UI字体
我们常用的微软雅黑、苹方字体，都是无衬线字体
具体可以看下：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
移动端web开发，默认中文字体不一样但都是无衬线，可以直接如下：
body{
font-family:sans-serif;}指定中文字体，反而画蛇添足。
serif，sans-serif可以和中文名字一起写，但是中文名字必须在sans-serif之前，否则不生效。
如下：
font-family:"Microsoft Yahei",sans-serif;
如下无效，不能这么写：
font-family:sans-serif，"Microsoft Yahei"；
用系统字体的话，就是system-ui
需求和现状：
有的朋友开发中，直接写了：
font-family:"Microsoft Yahei";
这样有问题，假如是mac用户，系统也安装了微软雅黑，岂不是自带的更好看的字体不能用了？需求是mac用户用自己自带字体，非mac用户用微软雅黑。
可以如下写：
html{
font-family:-apple-system,BlinkMacSystemFont,"Microsoft Yahei";}这样就可以达到我们的需求了！
4、font-weight
font-weight字体只有100-900,没有所谓的550，蓝湖等里面的550是不正确的。可能有的字体550在mac中是有效果，但是是不正确的。
那么问题来了，为什么font-weight 设置300，400，500，文字的粗细没有任何变化。只有600或者700才会加粗。感觉浏览器好像不支持这些数值。
实际上，所有这些数值关键字浏览器都是支持的。之所以没有任何粗细变化，是因为系统里面缺乏对应粗细的字体。特别是在桌面端。大部分用户的字体就一个加粗和正常尺寸两种，因此设置300，400，500没有任何变化。推荐OSX系统的苹方，或者“思源黑体”。
有的字体虽然字重丰富，但是不支持font-weight属性加载对应字体文件，这样的话我们只能通过@font-face的方式定义了！
@font-face{
font-family:'HAOROOMS';
font-weight:400;
src:local('HYQihei 40s')}@font-face{
font-family:'HAOROOMS';
font-weight:500;
src:local('HYQihei 50s')}@font-face{
font-family:'HAOROOMS';
font-weight:600;
src:local('HYQihei 60s')}使用的时候直接
font-family:'HAOROOMS';font-weight:400
就可以了。
5、font-style
很多朋友不了解font-style的italic和oblique的区别
italic // 表示当前字体的斜体，假如没有斜体，退而求其次，采用字体倾斜 同oblique
oblique// 单纯的文字倾斜很多中文没有斜体，因此这两个属性看不出来，假如有斜体的字体，那么这两个属性会比较明显了！
6、font属性
css的font属性，是众多属性的缩写。注意：font-size和font-family是必须的，假如只有一个，那么设置是无效的。
例如：
font:normal 700 14px/25px; // 设置无效
font: 14px "$" // 反而是有效的，认为"$"是一个字体
font属性除了缩写，还有关键词，但是关键词和缩写不能混用。
例如：
.menu{font:menu}
menu代码菜单使用字体。
关键词枚举如下：
caption //活动窗口标题栏使用字体
icon //包含图标内容所使用的字体，例如文件夹名称
menu //菜单使用字体
message-box//消息盒子里面使用的字体
small-caption//调色板标题使用的字体
status-bar//窗体状态栏使用的字体7、word-break和word-wrap的区别
通常word-break:break-all;和word-wrap:break-word的区别，可以通过字面意思来区分。
break-all，强制换行，不管是不是一个单词，换行折断。
break-word，单词强制换行，一个单词不会截断，整个单词换行。（可能会有换行空白）
8、text-align 两端对齐
之前有篇文章写过https://www.haorooms.com/post/css_liangduan_justify 这个是取巧的写法。下面介绍国际象形文字两端对齐的写法
.justify{
text-align:justify;
text-justify:inter-ideograph;}在加上强制单词换行，这样效果更佳！
.justify{
text-align:justify;
text-justify:inter-ideograph;
word-wrap:break-word;}上面都可以实现两端对齐。
9、text-transform 字符大小写
我们在输入验证码或者身份证的时候，可以用text-transform,一键转换大小写，体验更好！
input{
text-transform:uppercase;}10、first-letter设置美元、人民币单位不同样式。
我们在做网页不就中，经常有价格单位如下
<div class="price">￥699</div>
￥的颜色大小和699是不一样的，通常做法是再多包一层span等。但是我们可以用first-letter来实现样式改变。
.price::first-letter{
margin-right:5px;
font-size:xx-large;
vertical-align:-2px;}就可以实现想要的效果了。
11、div中保留textarea 的\n换行
我们在textarea中回车换行，但是div中不能同步显示换行，因为默认的换行符\n\r div中不识别。
在div中添加如下，就可以保留换行符
white-space: pre-line;
关于文本处理，后面再做补充，今天就暂时到这来。
