html - 将字体添加到网站

Question

我正在尝试将 Ubuntu 字体添加到我的网站，我希望它在网站上通用，所以所有内容都使用该字体，但我首先将它添加到我的 h1 标签中看看它是否有效，但它不起作用。我已将字体上传到我的服务器。

到目前为止，这是我的 CSS:

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight : normal;
    margin-top: 10px;
    letter-spacing: -1px;
}

h1 { 
    font-family: 'Ubuntu', sans-serif;
    color: #000;
    margin-bottom : 0.2em;
    font-size : 3em; /* 96 / 16 */
    line-height : 1.4;
}

像往常一样，我可能真的很愚蠢。我看过其他示例，但看不出我做错了什么。

Answer 1

这个问题可以通过两种方式解决。

您可以将 google font cdn 添加到您网站的 head 标签(如果已经托管)或者如果您有有效的互联网访问权限，那么您无需担心将其添加到本地文件夹中。

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

像这样

或者可能是你的文件路径位置不对

如果你的字体打包在根目录下，你可以很容易地调用它

src: url('Ubuntu-R.ttf') format('truetype');

但如果它在文件夹中(例如 ubuntu)

可以是src: url('ubuntu/Ubuntu-R.ttf') format('truetype');

但是如果在很长的路径中..尝试做这样的事情

src: url(../ubuntu/Ubuntu-R.ttf);

然后调用 font-family 属性，如果它位于本地文件夹中，则只调用“一个”名称。像这样

@font-face {
  font-family: Ubuntu;
  src: url(ubuntu/Ubuntu-R.ttf);
}

.myclass{
    font-family:Ubuntu; // The exact name for the @font-face
 }

希望对你有帮助