大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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';
评论区