Question

我正在处理我已经下载的网页布局模板，我在一些CSS文件中注意到有外部链接的引用来加载字体和主题，例如.css文件开头的以下代码行： -

@import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu)

当我在浏览器中打开链接时，我注意到它会加载以下内容： -

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: local('Karla'), local('Karla-Regular'), url(https://themes.googleusercontent.com/static/fonts/karla/v2/azR40LUJrT4HaWK28zHmVA.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

我的问题是我将此模板用于我们的Intranet，因此即使用户无法访问互联网，用户也可以访问内部网。所以我的问题是我如何在我的asp.net mvc项目中添加这些字体和主题，以便内容将从我们的服务器加载，而不是从谷歌网站加载？谢谢？

修改我替换了以下内容： -

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

： -

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: local('Karla'), local('Karla-Regular'), local('/Content/fonts/azR40LUJrT4HaWK28zHmVA.woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), local('/Content/fonts/_xyN3apAT_yRRDeqB3sPRg.woff');
}

但我没有得到字体效果？ BR

Answer 1

您可能希望在Google常见问题解答中看到this section

我可以将Google字体上的字体下载到自己的电脑上吗？ 是。至下载字体，只需将字体添加到您的集合中，然后单击 “下载您的收藏”链接。您可以下载要使用的字体它们适用于您的模型，文档或自己托管服务器

This article进一步详细介绍如何执行此操作，它应解决最终用户无法访问互联网的任何问题 - 只要您对字体的本地引用已正确定义在你的CSS中。

Answer 2

您应该从Google网站下载该字体，然后使用FontSquirrel generator之类的字体文件生成器进行处理，这也会生成您可以使用的CSS文件。

重点是不同的浏览器需要使用不同的字体格式，使用精心设计的@font-face规则提供。

当您使用https://fonts.googleapis.com/css?family=Karla|Ubuntu之类的网址使用字体时，Google服务器会识别浏览器并仅发送为该浏览器量身定制的CSS代码。如果您只是将其复制到您的页面上，它将仅适用于该浏览器和足够类似的浏览器。

我可以替换https://fonts.googleapis.com/css?family=Karla|Ubuntu的引用来读取我们服务器中的所有内容

2 个答案: