Question

我从设计师那里继承了Helvetica Neue字体，我需要在网站上使用它们。 A screenshot of what fonts I got.（我只关心常规和大胆。）

我的常规字体有效，但我的strong不是！为什么？ Here is what it looks like in the site.
我可以将这些粗体和常规定义合并为一行吗？

PS。我正在使用Bootstrap，如果这会产生差异。

CSS

 @font-face {
   font-family: 'Helvetica Neue';
   src: url('../fonts/helvetica-neue/regular.woff');
 }
 @font-face {
    font-family: 'Helvetica Neue Bold';
    src: url('../fonts/helvetica-neue/bold.woff');
    font-weight: bold;
    }

.and-then-something-like {
font-family: 'Helvetica Neue', Helvetica, "Open Sans", sans-serif;
}

Answer 1

您需要将每个src放在不同的font-face中，请查看取自Google字体的示例。

在您的示例中，您正在更改font-family名称（这很好），但只要bold，您就必须更改名称。

最好保持相同font-family。

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z3NuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

CSS - 链接到自定义字体 - 常规正在工作，Bold不是

1 个答案: