CSS如何一次嵌入多个字体粗细

Posted 2023-03-06

【中文标题】CSS如何一次嵌入多个字体粗细

【英文标题】：CSS How to embed several Font-Weights at once

【发布时间】：2014-05-24 00:59:06

【问题描述】：

我使用的是来自 Google 字体库的 Open Sans Font-Family，您可以在其中使用它：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

它会一次导出所有字体，当您使用 Open Sans 作为字体系列时，您只需输入 font-weight: XXX，它就会自动为其使用正确的字体。

我直接下载了这些文件，因为我们现在必须在本地使用它们，但它为每种样式和粗细提供了大约 10 种不同的字体（普通、中等、粗体、粗斜体，例如）。我不想单独导入它们并使用 font-family: Open-Sans-Bold（例如）

有什么方法可以一次性全部导入或者告诉 CSS 基本上是一样的 Font-Family 只是权重不同？

【问题讨论】：

我想你应该看到这个问题***.com/questions/17166060/…

How to embed font css?的可能重复

【参考方案1】：

（请原谅我的 Comic Sans neue 示例，只是我刚才说的）

---

你必须单独添加它们，看看下面的代码。每一个都有不同的“字体粗细”并有一个新的字体文件（light、regular 和bold）。

每个字体文件都有不同的字体大小，这意味着如果你想添加所有字体，你必须以这种方式添加它们（对于你想要的每一个）。

@font-face 
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Light.ttf')  format('truetype'); /* Safari, android, ios */
  font-weight: 100;


@font-face 
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 300;


@font-face 
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 700;

在你的 CSS 中调用它很简单：

p 
    font-family: 'Comic Neue', sans-serif;
    font-weight: 300; /*or 100/700*/

显然，您可以将其替换为 Open Sans 和 Open Sans 字体文件。

【讨论】：

谢谢，这完成了工作，Comic Sans 让我很开心：>

哈哈，我都在说什么！很高兴我能帮上忙！ @PhilipFeldmann

很好的答案。我经常看到这样做不正确。现在，如果我看到有人这样做不正确，我会将他们指向这个答案。 ?