让你的文字活起来- style小型大写字母

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

文字应该是网页中最常见的元素了，俗话说的好，见字如见人。下面请欣赏两幅书法作品：

我相信即使你不懂书法，也能看到出来哪副作品好吧！！！如果你非要说第一个比较好看，那我也只能表示:

font

font是缩写，可以设置所有字体属性。
设置顺序：
font-style font-variant font-weight font-size/line-height font-family

font-style

设置字体的样式

参数

normal 默认值。浏览器显示一个标准的字体样式。

inherit 规定应该从父元素继承字体样式。

italic 浏览器会显示一个斜体的字体样式。

倾斜的前提是，字体本身有倾斜属性，如果没有则不生效。

oblique 浏览器会显示一个倾斜的字体样式。

使字体向右倾斜。即使字体本身没有倾斜属性。

当字体存在倾斜属性的，italic和oblique的效果是一致的。

 .testItalic{
    font-style: italic;
}
<p class="testItalic">中文</p>
<p class="testItalic">italic</p>

.testOblique{
    font-style: oblique;
}
<p class="testOblique">中文</p>
<p class="testOblique">oblique</p>

font-variant

font-variant属性允许您将目标文本更改为小型大写字母，当然这个说法也是没错的，CSS2确实是这么使用的，但是参数值提供了两个，但是现在已经是CSS3的时代了。

CSS3，font-variant已经成为了缩写属性，包括font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等属性的缩写。

font-variant-caps

这个属性是干嘛的呢？？？

先解释单词
variant

caps（capital）

放在一起，是不是有点想法了。

这个方法用于从字体中选择专门设计的小型大写字母字形

这里我用了挑选，那就意味这你的字体要支持下面的参数（也就是字型）

参数

normal
正常字体

small-caps

小型大写字母（英语：small capitals，简称small caps）是西文字体设计中的一种字符形式。这些字母的形状（字形）和大写字母相同但尺寸较小。一般来说，小型大写字母的高度等于一个x字高，和大部分的小写字母一样；但是在部分字体中，小型大写字母的高度会比x字高略高一些，如Tiro Typeworks设计的一些字体中，小型大写字母的高度常比x字高超出30%。
这里出现了x字

在西文字体排印学中，x字高，（英语：x-height或corpus size）是指字母的基本高度，精确地说，就是基线（英语：baseline）和主线之间的距离。特别的，它指称一个字体中小写字母x的高度（这也是这个词的语源），而实际上这也和字母a、c、e、m、n、o、r、s、u、v、w和z的高度是一样的。尽管如此，在现代字体设计领域里，x字高代表了一个字体的设计因素，因此在一些场合，字母x本身并不完全等于x字高。

简单概括就是：大写字母的高度等于x自高或者比x字高30%。

对于这个属性来说，如果你的字符本来就是大写的，那他不会管，你本来啥样还啥样。

但是，如果你是小写字符，那么你就得变成大写字符，并且你的高度保持小型大写字母的高度

all-small-caps

上面的small-caps 如果本来就是大写字符不进行处理，但是all-small-caps无论你是大写还是小写，都变成小型大写字母。

对于English字符中的i字符，在all-small-caps下i变成了I，但是高度仍然是小i的高度。E字符仍然是E，但是高度变成了小写e的高度。

petite-caps

特小型大写字母，是不是跟上面的small-caps很像。没错，他们是一家人。
刚才我们是不是知道了small-caps的大写字母的高度等于x字高或者比x字高30%，这里的高度等于x字高，就是small-caps大写字母的高度等于x字的高度的情况。

all-petite-caps
这个属性是不是很容就猜出来了。就是说无论大小字符都采用特小型大写字母。

unicase
允许将大写字母转化为小型大写字母与普通小写字母的混用

仔细看下面的图，e是不是被变成了小型大写字母

titling-caps

标题大学，在排版中，标题大写是为标题和标题设计的大写变体。
这个属性会用标题大写来替换小写标题。

本人对于这个属性不是太清楚！！！希望大佬可以不吝赐教

如果为不支持这些功能的字体指定了“ petite-caps”或“ all-petite-caps”，则该属性的行为就像分别指定了“ small-caps”或“ all-small-caps”。

如果unicase为不支持该功能的字体指定了“ ”，则该属性的行为就像“ small-caps”仅应用于小写大写字母一样。

如果titling-caps使用不支持此功能的字体指定“ ”，则此属性没有可见效果。使用模拟小写字母时，

对于缺少大写和小写字母的脚本，“ small-caps”、“ all-small-caps”、“ petite-caps”、“ all-petite-caps”和“ unicase”没有明显效果。

番外-如何引入字体

我是从下面这网站制作的字体：

https://www.fontspace.com/category/titling

@font-face

@font-face {
  font-family: 'syl-font';
  src: url('***.ttf');
}

使用字体

font-family:'syl-font';