我应该怎么做才能在Web应用程序中使用特定字体？

Question

我正在编写一个Web应用程序，该应用程序可以从云和隔离的LAN（例如，无法访问Internet）运行。

我对JavaScript和Webpack还是很陌生，但是我发现我需要提供不同格式的OpenSans来源：

• open-sans-light.ttf
• open-sans-light.eot
• open-sans-light.woff
• open-sans-light.woff2

我设法从https://fonts.google.com下载OpenSans（虽然只有ttf版本）。

然后我将其放入_font.scss

@font-face {
  font-family: 'OpenSans Light';
  src: url('../fonts/open-sans-bold-light.eot');
  src: url('../fonts/open-sans-bold-light.eot') format('embedded-opentype'),
  url('../fonts/open-sans-bold-light.woff2') format('woff2'),
  url('../fonts/open-sans-bold-light.woff') format('woff'),
  url('../fonts/open-sans-bold-light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这是正确的方法吗？

Answer 1

确保字体的路径正确无误，并在要使用该字体的元素上使用font-family: 'OpenSans Light';。