1. css与svg的区别所在

css的强大之处就在于它强大的文本处理能力，这个我们在实际开发中也深有体会，我们可以对文字设置各种各样的效果，而相反svg 连一个简单的换行可能都比较费劲，这也就是css与svg的最主要区别所在，当然相反，svg的优势是在于它的图形展示，这也是近些年，前端的页面也越来越复杂，图形展示的需求也越来越多，这也是svg又开始发展起来的主要原因。

2. font概览

1.font缩写

如果 font 字体相关的属性的简写：

必须包含以下值：
    <font-size>
    <font-family>
可以选择性包含以下值：
    <font-style>
    <font-variant>
    <font-weight>
    <line-height>

说明：

font-style, font-variant 和 font-weight 必须在 font-size 之前
line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "16px/3"
font-family 必须最后指定
在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps（可以让英文字符表现为小体型大写字母，也就是大小看着和小写字母一样，但是显示的大写字母，了解一下即可）

2.font关键字

font支持关键字这种写法，可能大家都用的比较少，以下就是font所支持的关键字：

caption：用于标题控件（如按钮，下拉列表等）的系统字体。
icon：用于标签图标的系统字体。
menu：菜单中（如下拉菜单和菜单列表）使用的系统字体。
message-box：用于对话框的系统字体。
small-caption：用于小标题控件的系统字体。
status-bar：用于窗口状态栏的系统字体。

需要注意的是，使用关键字作为属性值的时候必须是独立的，不能添加 font-family 或者 font-size 之类的，这和 font 属性缩写不是一个路子。如果混用.

详细文档可以参考: mdn文档

3. @font-face与字体图标

1. 基本定义

@font-face本质上其实就是定一个变量，然后我们可以通过font-family来引用这个变量，从而定义字体。

我们首先来看一下@font-face的定义：

@font-face {font-family: "myfont"; //定义字体名称
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonticonfont.woff') format('woff'),
  url('../iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg') format('svg'); /* iOS 4.1- */
}

然后我们就可以在其他css中通过如下代码引用：
font-family：myfont；

说明：

通过src我们可以引入系统字体，也可以引入本地字体文件，
首先我们看到定义中，有.eot, .woff，.ttf等格式的字体，之所以要定义这么多格式，也是为了兼容不同的浏览器
format的方法的作用是提前让浏览器知道字体的格式，以决定是否需要加载这个字体，而不是加载完了以后再自动判断。

除了上面这些特性，还有很多其他特性，我们可以参考 MDN文档了解。

2. @font-face在字体图标中的应用

首先，我们要知道，字体图标我们现阶段可以使用很多工具去生成字体图标，例如，我们最常使用的阿里图标库，选择相应的图标，然后生成对应的文件，而且生成的css文件大多类似下面的代码：

@font-face { 
    font-family: ICON; 
    src: url(icon.eot); 
    src: url(icon.eot?#iefix) format('embedded-opentype'), 
    url(icon.eot.woff2) format('woff2'), 
    url(icon.eot.woff) format('woff'); 
} 
.icon { 
    font-family: ICON; 
} 
.icon-microphone:before {
    content: '\1f3a4' 
}

我们要重点注意一下这里的 content值：\1f3a4，它其实就是一个unicode编码字符，而字体图标的原来其实也是将字符与另外的图标形状做一个映射，这样我们引用字符的时候，就可以显示对应的图标。

那么，如何引入字体图标呢？

常见的有三种方式：具体可以参考阿里图标库帮助文档

这里，主要说下第二种：font class方式，其实本质上，和我们上面的实例代码一样，其实就是在css文件中定义了一个icon-microphone的类，并且设置它的before伪元素的content为指定字符，然后我们在代码中只需要使用下面的代码引入即可

<i class="icon icon-microphone"></i>

这样icon-microphone类中指定的字符对应的图标就可以显示出来了。

4. 对于文本的各种控制

text-indent

设计之处，主要是用于处理文本首行文本缩近的问题，效果如下：

随着发展，它有了一个更多的应用场景，通过负值，隐藏文本的功能

具体的一个场景就是，很多网站的logo就是网站的名称，从seo的角度来看，我们不仅仅是简单设置一个logo背景图片即可，从事我们还要写上对应的文字，从而搜索引擎可以更容易搜索我们的网站。

<h1 class='logo'>css世界</h1>

.logo {
    width: 120px;
    background:url(logo.png)
    text-indent: -120px;
}

letter-space与word-space

letter-space：主要用于设置字符之间的间距，此处字符包括英文字符，中文字符，以及空格。

word-space：通过属性名，我们可能会理解为用于设置单词之间的间距，其实本质上是作用于空格上的，之所以我们经常会有人说它是它设置单词之间的间隔，主要还是由于该属性设计也是针对英文的，因为英文之间多个单词之间一定是有空的，而中文单词之间是没有空格的，当然，如果我们手动在中文之间加上空格，那么word-space也是可以生效的，因为还是我们之前说的，它是作用于空格的，只要有空格的地方，word-space就可以生效。

注意点：

两者都是支持负值的，并且如果足够大，可以实现字符重叠，设置反向排列，利用这一特性，我们可以实现一些字体飞入的效果，效果可以参考：demo.cssworld.cn/8/6-4.php

word-break与word-wrap

之前很多时候，我们可能会遇到这几个属性总是混淆，什么时候换行，什么时候不换行，总是分不清，这里，给大家推荐推荐一种方法，white-space我们下节再说，这里我们主要区分以 word- 开头的两个属性：

首先说一下word-break:

word-break: normal; //使用默认的换行规则
word-break: break-all; //允许任意非 CJK（Chinese/Japanese/Korean）文本间的单词断行
word-break: keep-all; //不允许 CJK 文本中的单词换行，只能在半角空格或连字符处换行。非 CJK
文本的行为实际上和 normal 一致。

说明：这里我们重点一下，word-break:break-all ; 上面说了，它是允许非CJK文本间的单词断行，实际我们遇到最多的可能就是英文单词的换行了，也就是说它是可以让英文单词换行显示的

接下来是word-wrap：

word-wrap: normal; //使用默认的换行规则
word-wrap: break-word; //一行单词中实在没有其他靠谱的换行点的时候换行。

最后，我们主要说一下，最容易混淆并且最常使用的两个：

word-break: break-all; word-wrap: break-wrod;

他们两的最大区别：word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。

white-space

说完了上面以word-开头的两个属性，接下来我们说一下white-sapce,顾名思义，它是用来处理元素内的空白字符的。

首先我们说一下有哪些常见的空白字符：

space空格：即点击space键产生的空格

tab制表符：即点击tab键产生的空格，相对于space键而言，空格距离更大。

enter回车：即点击回车键，会同时产生空格和换行两个效果，其实本质上也是使一行的某个位置后面全部变成空格，然后之后的文本放到下一行显示。

说明：

空格和制表符的合并，其实是多个空格合并为一个，所以说至少有一个空格存在
换行保留就是保留文本原本的换行效果，合并以后，换行效果就没有了，
文本环绕：其实就是说明文本是否会自动换行。

而white-space的功能也是分为这三个维度：是否合并空格，是否合并换行，是否文本自动换行

我们来实际用一下，下面是我们的html结构。

先来解释一下图中：

图中第1处，是通过点击space键生成的多个空格

图中第2处，是通过点击tab制表符键生成的多个空格

图中第3处和第4处，都是点击enter回车键产生的换行符。

接下来我们分别使用不同的属性值去看看会发生什么。

首先是：white-space：normal;

2.然后是white-space: nowrap;

然后是white-space: pre

3. 然后是white-space: pre-wrap

4. 然后是white-space: pre-line

如果大家还有疑问或者感觉并不是很深刻，亲自敲代码体验一下即可。

text-align

我们最长使用的就是left/center/right,这里不做介绍了，除此之外，还有justify属性值，用于文本的两端对齐效果。

这里注意一个细节，但我们设置text-align：justify时，文档两端对齐，自然而言文本之间的间距会变化，即对letter-space和word-space造成影响，或者换种说法：letter-space和word-sapce 在与text-align:justify一起使用的时候，可能会相互影响，导致其中某些属性效果并没有生效，这里我们不做具体讨论，我们在实际开发的时候如果遇到注意些即可。

text-decoration

在实际使用种，text-decoration：underline是相对使用较多的，用于加一个下划线。除此之外，还有其他属性：

none //默认纯文字
underline //下划线
overline //上划线
line-through //穿过文本的线
blink // 定义闪烁文字
inherit

注意点：上面这些属性值是可以同时定义多个的

text-decoration: underline overline; //同时定义上划线和下划线。

text-transform

顾名思义：文字转换，它是为英文字符设计的，可以实现全大小，全小些，首字母大小等效果。

none // 默认
capitalize //文本中的每个单词以大写字母开头。
uppercase //全大写
lowercase //全小写
inherit

实际应用场景：

身份证输入：我国身份证最后一位可能是大写X，所以输入框要求必须是大写字母，这时候我们就可以设置：

input {
    text-transform: uppercase
}

验证码输入有时候验证码如果不区分大小写的时候，这个时候我们可以统一设置为大写或者小写字母，这样用户就不用怀疑到底是该输入大写还是小写，也不用来回切换大小写了。

first-letter与first-line

这里，我们只提一点，这两个伪元素生效的前提：

首先，元素的 display 计算值必须是 block、inline-block、list-item、table cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table 和 display:flex 等。
不是所有的字符都能单独作为::first-letter 伪元素存在的。我们来一个效果

p:first-letter { color: silver; } 
<p>？？？？？？？</p>

这时，我们可能很多人以为，第一个问号的颜色会变成银色，但实际上是全部问好都变成银色，为什么呢？这是因为常见的标点符号、各类括号和引号在::first-letter 伪元素眼中全部都是“辅助类”字符，而“辅助类”字符会统一把它看作是一个字符，

我们继续看一个效果就更理解了

p:first-letter { color: silver; } 
<p>？？？？？？？哈哈哈</p>

此时，所有的问号都会变成银色，它会被当作一个字符对待。

注：以上这些知识点主要是参考学习了张鑫旭老师的css世界之后所进行的总结，大家也可以阅读该书，进行更详细的学习。

css世界 之 强大的文本处理能力