为什么我必须为网络字体声明特定的粗体/斜体变体？

发布于 2025-01-05 00:38:47 字数 339 浏览 0 评论 0原文

我正在尝试在网站上使用 Ubuntu 字体。我正在使用 FontSquirrel @font-face 生成器。在安装了 Ubuntu 字体的计算机上，当我只使用像 font-family: Ubuntu 这样的 css 时，一切都可以正常工作。但在其他计算机上，除非我明确说明我想要哪种特定品种，例如 font-family: UbuntuRegular 或 font-family: UbuntuBoldItalic，否则它将无法工作。所有浏览器的情况都是相同的。

每次都必须声明重量和款式是愚蠢的。是否有某种方法可以只声明通用字体系列并在需要时自动使用粗体和斜体？

原文

分享到QQ

分享到微博

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

发布评论

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

梦一生花开无言 2025-01-12 00:38:47

大多数 @font-face 生成器将 font-weight 和 font-style 设置为正常，并为每个权重/样式使用单独的声明以实现向后兼容性。但是您可以重写声明，为每个变体使用相同的家族名称，仅在适当的情况下更改每个变体中的字体粗细和字体样式，例如：

@font-face { /* Regular */
font-family: 'Klavika';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-regular-webfont.woff') format('woff'),
     url('klavika-regular-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}

@font-face { /* Bold */
font-family: 'Klavika';
src: url('klavika-bold-webfont.eot');
src: url('klavika-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-bold-webfont.woff') format('woff'),
     url('klavika-bold-webfont.ttf') format('truetype'),
font-weight: bold;
font-style: normal;
}

以便 H1 应该继承粗体粗细，而不需要指定粗细：

h1{ font-family: 'Klavika';}

456 Berea St 有一篇很好的文章详细介绍了实现（和兼容性）：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Most @font-face generators set font-weight and font-style to normal and use separate declarations for each weight/style for backward compatibility. But you can rewrite the declarations to use the same family name for each variation, changing only font-weight and font-style within each where appropriate, e.g.:

@font-face { /* Regular */
font-family: 'Klavika';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-regular-webfont.woff') format('woff'),
     url('klavika-regular-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}

@font-face { /* Bold */
font-family: 'Klavika';
src: url('klavika-bold-webfont.eot');
src: url('klavika-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-bold-webfont.woff') format('woff'),
     url('klavika-bold-webfont.ttf') format('truetype'),
font-weight: bold;
font-style: normal;
}

So that H1 should inherit the bold weight without the need to specify the weight: