css 不同系列的不同字体大小

发布于 2024-09-15 09:40:53 字数 278 浏览 1 评论 0原文

我有一个像这样的 CSS 声明:

font-family: font1, font2, font3;

其中 font1 是嵌入的 eot/ttf 字体,但问题是该字体比其他字体小,所以我想为该字体(font1)使用不同的字体大小(1.8em) )。所有其他字体(font2、font3)保持不变。

问题是,我无法验证用户的浏览器是否使用 font1、font2 或 font3。是否有任何 CSS 声明允许不同系列使用不同的字体大小?

谢谢。

I have a CSS declaration like this:

font-family: font1, font2, font3;

where font1 is an embedded eot/ttf font, but the problem is that this font is smaller than the other fonts so I want to have a different font-size (1.8em) for this font (font1). All other fonts (font2, font3) stay untouched.

The problem is, that I cannot verify if the user's browser uses font1, font2 or font3. Is there any css declaration which allows different font-sizes for different families?

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

窗影残 2024-09-22 09:40:53

有一种方法可以做到这一点,但到目前为止它的支持非常差。您正在寻找的 CSS 属性是 font-size-adjust - 专门为解决此问题而引入的新 CSS3 属性。规范说:

在字体回退的情况下
发生时,后备字体可能无法共享
与所需的纵横比相同
字体系列,因此会显得更少
可读。字体大小调整
财产是保护财产的一种方式
字体回退时文本的可读性
发生。它通过调整来做到这一点
字体大小,使 x 高度为
无论使用什么字体,都一样。

但是,目前仅 Firefox 支持它,因此您可能需要寻找替代方案。

有关如何使用它的示例,请参阅:

http: //webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size -调整.html
http://www.w3. org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust - a new CSS3 property introduced specifically to address this problem. The specification says:

In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.

However, it is only supported in Firefox as of now, so you might want to look for alternatives.

For examples of how to use it, see:

http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

隱形的亼 2024-09-22 09:40:53

我知道已经有一段时间了,但最近我偶然发现了与 OP 描述的相同的问题。由于 font-size-adjust 的支持仍然很差,我想分享另一个对我有用的解决方案:

注意:以下解决方案仅在使用嵌入字体时才有效@font-face-声明。

在这种情况下,只需

size-adjust: 90%;

在您的@font-face-声明中包含例如即可。相关字体将仅显示为指定尺寸的 90%。

浏览器支持

浏览器支持目前为 74%,支持所有主要浏览器Safari 和 IE 除外。我知道这远非最佳。但由于这个问题“只是”关于设计而不是功能,我认为有总比没有好。

I know it has been a while, but recently I stumbled upon the very same problem as described by the OP. As font-size-adjust is still very poorly supported, I'd like to share another solution that worked for me:

Note: The following solution does only work if the fonts are embedded using the @font-face-declaration.

In that case just include e.g.

size-adjust: 90%;

in your @font-face-declaration. The relevant font will appear at only 90% the size of the specified size.

Browser support

Browser support is currently at 74% with all major browsers supported except for Safari and IE. I know this is far from optimal. But as this problem is "just" about design and not about functionality, I suppose it is better than nothing.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文