如何在一个字体文件中包含不同的字重？

Question

如何在一个字体文件中包含不同的字重？

3

我目前正在使用WordPress制作网站。我遇到的问题是使用字体。我没有在这里找到答案，所以我决定自己提问。有人给我发送了一个要使用的字体，但问题是当我打开文件时，会有不同风格的字体。更明确地说:字体是Avenir Next，而不同的样式是Avenir Next Bold，Avenir Next Medium，Avenir Next Ultra Light。

这不是谷歌字体。我已经尝试使用@font-face 来包含它：

@font-face {
    font-family: Avenir Next;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: bold;
    font-weight: 700;
}

@font-face {
    font-family: Avenir Next Medium;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: normal;
    font-weight: 400;
}

我可以使用Avenir Next字体（比较粗，所以不想用它），但无法使用Avenir Next Medium。

这是一款付费字体，但我并不是购买者。那个人把字体文件（Avenir-Next.ttf）发送给了我，所以这就是我要使用的。

我倾向于不使用插件来包含它。反正我也找不到合适的插件。但如果没有其他办法，只能使用插件，我还是愿意使用的。

希望我的问题表述清楚了（第一个提问）。

- idbruin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tautvydas Banys · Accepted Answer

如果您想从本地文件加载字体，首先您需要使用像 https://www.web-font-generator.com/ 这样的工具来生成不同格式的字体。

然后，您需要像这样加载字体的所有格式。

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Regular.otf')  format('opentype'),
        url('fonts/AvenirNextLTPro-Regular.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Regular.ttf')  format('truetype'), 
        url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Demi.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Demi.ttf')  format('truetype'),
        url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
    font-weight: 500;
    font-style: normal;

}

正如您所看到的，字体名称相同，但字重大小不同（普通-400和Demi-500）

然后，当您想在不同元素中使用不同的字重时，您必须这样声明：

p {
  font-family: 'AvenirNextLTPro';
  font-weight: 400;
}

h1 {
  font-family: 'AvenirNextLTPro';
  font-weight: 500;
}