揭秘CSS(第 1 版)
3.1.5 字体变形
阅读(

概述

CSS选择器

字体和文本

字体

字体风格

字体粗细

字体大小

字体系列

字体变形

有时候,希望一篇文章中的英文单词或英文字母,无论是小写还是大写,统一变成大写,就可以使用 font-variant属性实现。

font-variant属性用来使英文字母变为小型大写字母,可选值有 normal | small-caps,默认值为 normal。normal 为正常的字体;small-caps 让字母变成小型大写字母,这意味着所有的小写字母均会被转换为大写,但字体更小。如:

.normal {
    font-variant: normal;
}
.small-caps  {
    font-variant: small-caps;
}
<p class="normal">This is a paragraph</p>
<p class="small-caps">This is a paragraph</p>

上述代码定义了 2 个段落,第一个段落文本正常显示,第二个段落文本变为大写并缩小显示。运行结果如图 3‑6 所示:

font-variant属性
图3-6 font-variant属性

从上图可以看出,font-variant属性只把段落中的小写字母变为大写,并缩小显示,而段落中的大写字母依然保持原样,没有进行转换。这样一来,转换出来的大写字母,比实际的大写字母尺寸要小,显得不太协调。所以,在转换对象中,建议不要包含大写字母。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验