为什么不在网站上下载字体？

Question

我从dafont.com下载了2种字体并编码

html-selector {
 font-family: font-name;
}

当我编码时，字体名称会出现在PHPStorm字体系列列表中。但是在html / css中渲染时字体不起作用。

有人可以帮忙吗？

Answer 1

下载字体是不够的。您必须让您的网页（CSS文件）知道在哪里获取新字体，如css font-family中所示。

我假设您已下载font-name-Regular.ttf并将其存储在./fonts/文件夹中。

在你的css文件中（最好是在顶部）使用：

@font-face {
  font-family: 'font-name';
  src: url('./fonts/font-name-Regular.ttf');
}

注意：

确保您始终拥有后备字体，只是浏览器不支持@font-face规则。

示例：

html-selector {
    font-family: font-name, Helvetica, Arial, sans-serif;
}