在我的网页应用中使用Ubuntu字体

Question

我打算在我的Django网页应用中使用Ubuntu字体。我已经在这里下载了这个字体：http://font.ubuntu.com/。到目前为止，我通过在我的HTML文件中添加一行代码来启用这个字体，代码是<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">，这个链接是指向Google的API。

不过，我的网页应用服务器不会连接到互联网，因为它只用于内部使用。这样的话，上面的方法还有效吗？如果不行，我该如何把下载好的字体嵌入到我的网页应用中呢？

Answer 1

CSS是在用户的设备上运行的。只要用户的设备连接了互联网，它就能正常工作。

Answer 2

你到底需要哪些字体呢？

其实很简单，你可以访问这个链接：

http://fonts.googleapis.com/css?family=Ubuntu:regular,bold,italic

这个链接会返回一些信息：

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: normal;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/kbP_6ONYVgE-bLa9ZRbvvvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}

你需要下载你想用的每个WOFF文件，具体可以通过'src'属性找到这些文件，然后把它们放到你的静态文件夹里，并在CSS中把'src'的链接改成你自己的链接。

举个例子，对于普通字体，你应该下载这个文件：http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff，然后把它放在/static/ubuntu_normal.woff这个位置。

接下来，你需要创建以下的CSS：

@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('/static/ubuntu_normal.woff') format('woff');
}
}

你还需要添加你想使用的每种字体样式，比如粗体、斜体等等。