html - 如何更改 元素的字体系列？

Question

这是我唯一的 CSS

@font-face {
  font-family: 'thefont';
  src: url('fonts/the-font.otf');
  font-style: normal;
}

body {
    font-family: 'thefont';
}

当我执行 <button>Hi</button> 时字体最终是 -apple-system .

如果我真的将字体分配给 button , 它将使字体出现。

有谁知道为什么它不影响 body 及其内部的一切？

Answer 1

除了下面的信息，为了确保您的自定义字体被考虑到按钮，您需要申请

button {
    font-family : inherit;
    font-size: 1em;
}

所有按钮元素。

您可以在那里检查他们是如何做到的:

http://purecss.io/buttons/

或那里:

http://getbootstrap.com/css/#buttons

还要确保您的字体以几种不同的格式导出，以便所有平台都支持它。

您可以使用 FontSquirrel Generator将您的字体导出为所有格式。

您的 CSS 应该看起来像这样:

@font-face {
  font-family: 'thefont';
  src: url('the-font.eot'); /* IE9 Compat Modes */
  src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('the-font.woff2') format('woff2'), /* Super Modern Browsers */
       url('the-font.woff') format('woff'), /* Pretty Modern Browsers */
       url('the-font.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}