如何更改字体样式？

Question

我想更改我商店的所有字体。 我发现这段代码可以帮助我更改它。 我需要在哪里实施它？我是否需要更改其他代码串才能使其正常工作？

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

Answer 1

您必须将此规则放入样式表并使用 font_family 作为选择器。

添加到样式表后，该规则会指示浏览器从其托管位置下载字体，然后按照 CSS 中指定的方式显示它。

例如：

Css 部分：

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

body {
    font-family: GothamBlack, sans-serif;
}

如果body不能使用GothamBlack，所以它使用sans-serif。

更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

https://css-tricks.com/snippets/css/using-font-face/

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 2

将 font-family 声明放入正文选择器中：

@font-face {
    font-family: GothamBlack;
    src: url(https://github.com/JDRF/design-system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff); 
}

然后

body {
  font-family: GothamBlack;
}

然后您页面上的所有元素都将继承此字体系列（当然，除非您稍后覆盖它）。