标签搜索
隐藏侧边栏

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

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 34 阅读 / 2,589 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

番外-如何引入字体

  1. 我是从下面这网站制作的字体:

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

  1. @font-face
@font-face {
  font-family: 'syl-font';
  src: url('***.ttf');
}
  1. 使用字体
font-family:'syl-font';

番番外-代码

image.png

0

评论区