Question

我正在尝试将Ubuntu字体添加到我的网站，我想在网站上使用它，所以所有内容都采用该字体，但我首先将其添加到我的//Sidbar Animations $(".block").mouseover(function() { $(this) .animate({ width: "90%" }, { queue: false, duration: 400 }).css("text-indent", "0"); }); $(".block").mouseleave(function() { $(this) .animate({ width: "5%" }, { queue: false, duration: 500 }).css("text-indent", "100%"); });标记中以查看如果它有效，但它不起作用。我已将字体上传到我的服务器。

到目前为止，这是我的css：

h1

像往常一样，我可能真的很愚蠢。我已经查看了其他示例，但无法真正看到我做错了什么。

Answer 1

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

如果您已经托管过，或者如果您拥有有效的互联网访问权限，则可以将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属性，只调用＆＃34;一个＆＃34; name，如果它位于文件夹中的本地。像这样

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

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

希望有所帮助

Answer 2

就像将这一行添加为style.css的第一行或任何你所说的那样简单：

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

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

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

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

此外，您不需要将字体上传到您的服务器，我不明白为什么每个人都应该将所有字体上传到他们的服务器，因为有几个快速CDN已经包含了所有内容。

添加字体到网站

2 个答案: