9

是否可以使用 CSS 更改特定字符的大小？

例如，在我正在使用的段落中font-face: Arial; font-size: 12pt;。我希望只有字母“a”会出现在尺寸 10 中。

有没有办法做到这一点？

谢谢。

4

6 回答 6

10

不可以。除了:first-letter和其他伪类之外，您不能使用 CSS 定位单个字符。您需要将字符包装到一个元素中（例如 a <span>）来为其指定样式。

您可以使用 Javascript 解决此问题 - SO 上有基于 jQuery 的解决方案。但它很笨拙。

于 2010-08-22T13:13:31.983 回答
5

我不相信你可以，考虑使用文本编辑器进行查找/替换 'a' ，<span class='a-xxx'>a</span>然后你可以使用 css 来做.a-xxx { font-size: 10px; }

于 2010-08-22T13:15:36.910 回答
0

不可以。您只能定位元素（例如包含单个字母的跨度）和伪元素（例如:first-letter）。

于 2010-08-22T13:13:18.583 回答
0

如果没有 javascript，您将无法以跨浏览器一致且简单的方式执行此操作。我建议为 jquery 'captify'。

于 2010-08-22T15:32:13.243 回答
0

也为了可访问性和兼容性以及所有最好不要定义特定字体（尝试字体系列）和大小，然后使用 % 在其之上，并将它们全部定义为自定义 span/div 样式

例如

大写字母（字体大小：150%）；

于 2010-08-22T20:01:54.850 回答
0

很抱歉挖掘了这个 11 岁的线程，但我现在也遇到了这个问题。

我的用例是在特定网站上使藏文字符变大，因为与相同字体大小的拉丁字符相比，它们几乎不可读。

据我了解，这里的所有答案都已过时，因为我发现@font-face css at-rule 涵盖了这一点。它接受 Unicode 范围，因此也适用于单个字符。所有现代浏览器都支持。

所以我需要做的就是在我的 css 中添加以下内容，这将定义一个名为“杨坡藏文”的新字体（当然，根据自己的喜好修改 url 参数）：

@font-face {
  font-family: 'Yangpo Tibetan Uni';
  src: url("./util/fonts/YagpoTibetanUni-x3jnj.ttf") format("truetype");
  unicode-range: U+0F00-0FFF;
}

然后像这样使用新定义的字体：

body {
  font-family: /* main font */ 'Raleway', /* and then your override */ 'Yangpo Tibetan Uni';
}

OK，替换整个字体是一回事，但是如何让一个字符变大呢？@font-face 也接受size-adjust参数（注意！！！这个参数在 Safari 中不起作用，但还有其他参数，如 font-stretch - 看看适合您的需要）：

size-adjust CSS 描述符定义了与此字体相关的字形轮廓和度量的乘数。这使得在以相同字体大小呈现时更容易协调各种字体的设计。

因此，使 @font-face url 指向原始 URL 并操纵大小调整值（或其他参数，根据文档）。

于 2021-12-16T12:45:47.120 回答