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

已于 2022-04-23 00:16:50 修改
阅读量614 收藏 18
点赞数 18
文章标签： css css3 html
于 2021-10-31 16:06:21 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/120973770
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍了CSS3中的`font-variant-caps`属性，用于从字体中选择小型大写字母字形，详细解析了small-caps、all-small-caps、petite-caps、all-petite-caps、unicase和titling-caps等参数的含义及应用场景，帮助理解如何通过CSS改变文本的显示效果。
摘要由CSDN通过智能技术生成

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

原文链接 ==>http://sylblog.xin/archives/49

前言

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

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

了解本专栏 订阅专栏 解锁全文
YOLO大师
关注
  • 18
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
订阅专栏
小型大写字母字体
神zhi殇的博客
05-05 2869
把段落设置为小型大写字母字体： font-variant:small-caps; p.normal { font-variant: normal } p.small { font-variant: small-caps } <p class="normal">This is a paragraph</p> <p class="small">Th...
小型大写字母的用武之处
杏仁技术站
08-28 2184
作者 | 孔若诚杏仁产品经理，业余美剧、设计、哲学爱好者。头像是我偶像。对英文字体排版稍有了解的话，就会知道在大写字母和小写字母之外，还存在着一种特殊的类型：小型大写字母...
.style设置样式时，带-的要改成大写
正一品程序员的博客
01-06 225
dom.style设置样式时，带-的要改成大写 例子：z-index要改成zIndex Dom.style.zIndex = '-1'
Word之如何设置small caps(全大写但是首字母更大)格式?
落日之城
12-12 7709
Smal caps是一种特殊的格式, 字母都是大写但是首字母更大一点, 比如: 一版用于强调专有名字, 或者用来表示人名的姓. Word的大小写设置里只有全大写, 首字母大写, 首字母小写等. 如果需要调整为Small caps, 需要在字体设置里修改: 选中单词右键-Font, Effect, 勾选Small Caps的checkbox即可. 当然, 一些字体比如Copperplate Gothic Bold也支持, 但是不太普遍. ...
css解决谷歌浏览器字体小于12px方法
u013504103的博客
05-05 2031
css解决谷歌浏览器字体小于12px方法 方法一:利用 transform: scale();缩放字体 .small{ transform: scale(0.5); } 这个方法有个不好的地方就是缩放会把基线位置与其他正常排版不一致，导致往往需要利用position: absolute;来调试使其与其他排版保持基线一致。 方法二:利用font-variant-caps:all-small-caps; .small{ font-size: 12px; font-variant-caps:all-s
conversor-minusculo-maiusculo:小写到大写转换器
05-20
在描述中，"小写转换器"和"小写到大写转换器"暗示了应用程序的核心功能：接收用户输入的小写字母，然后将其转化为大写。在编程中，这通常通过字符串方法实现，如JavaScript中的`toLowerCase()`（将字符串转为小写）...
21.1 CSS 文字样式
08-17
5. **字体变体**：`font-variant`属性用于控制文本的大小写，如小型大写字母（`small-caps`）。 6. **文字颜色**：`color`属性用于设置文本的颜色，可以使用颜色名称、十六进制值、RGB、RGBA、HSL或HSLA。例如：`...
JavaScript CSS Style属性对照表
09-25
- `font-variant`: 设置小型大写字母。 - `font-weight`: 设置字体的粗细。 6. **其他样式属性**： - `display`: 控制元素的显示方式（如块级、行内、隐藏等）。 - `list-style-type`: 设置列表项的标记类型。 ...
css字体样式(Font Style) 属性
12-13
11. **字体变形 (Font Variant)**: `font-variant` 属性用于小型大写字母效果，如`font-variant: small-caps;`。 12. **英文转换 (Text Transform)**: `text-transform` 属性用于英文大小写的转换，如`text-...
CSS3文字特效艺术文字样式特效代码
03-20
2. `font-feature-settings`：开启字体的高级特性，如小型大写字母、连字符等。 在压缩包中的1511文件很可能是包含示例代码的文件，它可能提供了各种文字特效的实例，你可以通过查看和运行这些代码来更直观地了解...
CSS字体：字体特性
奇舞周刊
09-11 534
编者按：本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团Web前端开发资深专家，360前端技术委员会委员、W3C AC代表。CSS...
密码：大写字母 小写字母 数字 特殊字符（四种里至少三种）
热门推荐
欣欣博客
11-13 6万+
正则表达式：大写字母 小写字母 数字 特殊字符（四种里至少三种） 第一种： /((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=...
前端电子表数字字体_CSS字体：字体特性
weixin_39725650的博客
11-29 2973
编者按：本文作者李松峰，资深技术图书译者，翻译出版过40余部技术及交互设计专著，现任360奇舞团Web前端开发资深专家，360前端技术委员会委员、W3C AC代表。CSS Font Module Level 3(本文以下简称“ML3”)新增了字体特性(Font Feature)属性，用于扩展font-variant，以支持丰富OpenType字体特性，如连字。我们知道，字体文件中包含着从...
html的style不起作用,css样式不起作用是什么原因？
weixin_34668850的博客
06-10 8244
在写页面时，有时会发现自己写的css样式无法生效，我们该如何排查css样式无法生效？常见的css样式不起作用的原因有哪些呢？下面我们就来看一下css样式不起作用的原因。排查css样式不起作用的方法步骤：首先，先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。接着按以下流程排查：以下是排查以及修改方法：再次提醒在排查前先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。有可能自己什...
大写字母、小写字母、数字、特殊字符、至少有2个组合
高桥凉介的博客
04-13 2691
/** * 大写字母、小写字母、数字、特殊字符，至少有2个组合 * @param str * @return */ public static boolean checkpwd(String str){ Integer isDigit = 0;//数字字符 Integer isUpperCase = 0;//大写字符 Integer isLowerCase = 0;//小写字符 Inte...
CSS系列之字体相关的样式
老__L的博客
01-18 6067
本文主要CSS的font、font-family、font-size、font-style、font-variant、font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures、font-variant-numeric、font-weight、line-height属性。字体相关的样式
class和style的书写方式
xiaoququ的博客
02-27 398
class <div :class="{ red: !name1, bb: !name2 }">1111111111</div> <div :class="[name1 ? 'yellow' : 'red', 'bb']">222222222222</div> <div :class="`${name1 ? 'yelow' : 'red'} bb`">3333333333333</div> style <di
html设置字体为小型大写字母,css – 启用小型大写字母
weixin_29811891的博客
05-31 1032
它在英语中被称为“小资本”或“小型股”.在排版中,小写字母是单独设计的(字体作者)字母版本.它们具有大写字母的形状,但它们的高度通常只比字体的x高度(小写字母“x”的高度)大一些.它们可以用小型大写字体实现,但更常见的是,它们是字体内的字形变体.在MS Word中,包括Word 2007,以及在font-variant：small-caps的CSS实现中,“小首都”实际上只是缩小尺寸的大写字母. ...
如何使用css写三角形
最新发布
z16638522031的博客
08-10 75
在这个示例中，我们首先创建了一个名为.parent-element的div元素，然后通过:before伪元素在其上方创建一个向下指向的黄色三角形。通过调整top值和边框宽度，你可以根据需要自定义三角形的大小和位置。你可以使用一个div元素，然后将其宽度和高度设置为0，接着定义透明和实色边框来实现三角形的形状。根据你需要的三角形样式（例如朝向、大小、颜色等），你可以调整边框的宽度和颜色。这种方法类似于第一种方法，但它允许你在现有的HTML元素上添加三角形形状，而不是使用一个单独的div元素。
"CSS3样式表-字体、文本、背景属性详解
通过设置font-family可以定义网页中的字体系列，font-size可以设置文本的大小，font-style可以设置文本的风格，font-variant可以控制文本是否显示为小型大写字母，font-weight可以定义文本的粗细。通过这些属性的...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值