html - 如何在html中引用自定义字体？

Question

我正在尝试创建 html 屏幕。这些是模型屏幕，不会部署在任何应用程序服务器中。我创建了自定义字体，我需要通过 CSS 引用它们。

我的 index.html 和 fonts 文件夹在下面的位置。

D:\index.html
D:\fonts

我在 CSS 文件中有以下代码:

@font-face{font-family:"MyRegular";
src:url('fonts/mycotext_rg.eot');
src:url('fonts/mycotext_rg.eot?#iefix') format('eot'),
    url('fonts/mycotext_rg.woff') format('woff'),
    url('fonts/mycotext_rg.ttf') format('truetype'),
    url('fonts/mycotext_rg.svg') format('svg');
font-weight:"normal"}

如果我应用字体系列，则不会应用样式。我怎样才能引用自定义字体？我的 url 引用是否正常，还是需要更改？

谢谢!

Answer 1

下面的两个答案都很好，并向您展示了如何引用您的字体(通过使用 @font-face 中声明的 font-family 属性声明的名称>，但是当你在本地部署时，你可能还想使用 local 属性，它应该允许你在引用其他源之前引用系统上已经安装的字体。使用 Open Sans例如，您可以使用:

src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/opensans-bold.woff) format('woff');

然后只有在本地找不到该字体时，才会从您的 URL 下载该字体。