共计 3333 个字符，预计需要花费 9 分钟才能阅读完成。
前言
之前博客文章不成体系，主要是一些突然想到的零散知识点。本文及后面几篇文章，将推出一系列文章。帮忙梳理知识点。提高技能。本文着重讲解 css 有关文本处理 font 的那些事。之所以先从 font 说起，是因为 UED 对字体要求比较高，很多朋友还原 UED 设计稿之后，出来的效果，UED 并不满意。其中，除了屏幕，自适应等原因之外，字体文本处理也是一个重要因素。
1、ex 实现文字和图标垂直居中
ex 单位 IE6 时代就支持了，主要是相对字母 x 的高度, 可以实现文字和图标对齐，不受文字字体和字号的影响。
如下图：
html
haorooms 博客 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 设置美元、人民币单位不同样式。
我们在做网页不就中，经常有价格单位如下
￥699￥的颜色大小和 699 是不一样的，通常做法是再多包一层 span 等。但是我们可以用 first-letter 来实现样式改变。
.price::first-letter{
margin-right:5px;
font-size:xx-large;
vertical-align:-2px;
}就可以实现想要的效果了。
11、div 中保留 textarea 的 n 换行
我们在 textarea 中回车换行，但是 div 中不能同步显示换行，因为默认的换行符 nr div 中不识别。
在 div 中添加如下，就可以保留换行符
white-space: pre-line;关于文本处理，后面再做补充，今天就暂时到这来。
