javascript - 我应该怎么做才能在我的网络应用程序中使用特定字体？

Question

我正在编写一个 Web 应用程序，它应该从云和隔离的 LAN（例如，没有 Internet 访问权限）运行。

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

• 打开无光.ttf
• open-sans-light.eot
• 打开-sans-light.woff
• 打开无光.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;
}

这是正确的做法吗？

标签： javascriptwebpackfonts

Answer 1

确保正确的字体路径并font-family: 'OpenSans Light';在您想要拥有该字体的元素上使用，您就可以开始了。