将字体添加到网站答案

【问题标题】：Add font to website将字体添加到网站
【发布时间】：2015-08-21 11:24:10
【问题描述】：

我正在尝试将 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;
}

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

【问题讨论】：

这个css文件在哪个目录？字体文件在哪？
Ubuntu 可用于 Google 字体。我强烈建议使用该方法而不是自己提供字体。就像将放在标题中一样简单。 google.com/fonts#UsePlace:use/Collection:Ubuntu.
css-tricks.com/snippets/css/using-font-face

标签： html css fonts

【解决方案1】：

只需将此行添加为style.css 的第一行或您所称的任何名称：

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

它会处理所有事情，然后你就可以开始在你的 css 中使用它了：

.ubuntu-font {
  font-family: "Ubuntu";
}

如果您还想要粗体和斜体或其他一些东西，您可以转到here，选择您想要的那些，然后从该页面的第 3 部分复制@import。

另外，有了这个你就不需要将字体上传到你的服务器，我不明白为什么当有几个快速的 CDN 已经拥有所有东西时，每个人都应该将所有字体上传到他们的服务器。

【讨论】：

【解决方案2】：

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

如果您已经托管或者如果您有有效的互联网访问权限，您可以将 google 字体 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
 }

希望对你有帮助

【讨论】：