让你的文字活起来 |
您所在的位置:网站首页 › 294600大写 › 让你的文字活起来 |
大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界! 前言文字应该是网页中最常见的元素了,俗话说的好,见字如见人。下面请欣赏两幅书法作品: 我相信即使你不懂书法,也能看到出来哪副作品好吧!!! 如果你非要说第一个比较好看,那我也只能表示: 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; }中文 italic .testOblique{ font-style: oblique; }中文 oblique 复制代码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
这个属性是不是很容就猜出来了。就是说无论大小字符都采用特小型大写字母。
仔细看下面的图,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”没有明显效果。 番外-如何引入字体 我是从下面这网站制作的字体:www.fontspace.com/category/ti… @font-face @font-face { font-family: 'syl-font'; src: url('***.ttf'); } 复制代码 使用字体 font-family:'syl-font'; 复制代码 番番外-代码掘金这个活动,规定代码不能超60%,所以只能截图了。摊手.png 。
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |