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

mctunoxg  于 2023-01-03  发布在  Go
关注(0)|答案(3)|浏览(191)

我正在做一个网页布局模板,我已经下载,我注意到一些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使用此模板,因此用户即使无法访问Internet也可以访问intranet。因此,我的问题是如何在我的www.example.com mvc项目中添加这些字体和主题asp.net,以便从我们的服务器而不是从Google站点加载内容?谢谢?

编辑我替换了以下内容:-

@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

rjzwgtxy

rjzwgtxy1#

您可能希望在Google FAQ中查看有关此主题的这一部分

**我可以将Google Fonts上的字体下载到我自己的计算机上吗?**可以。要下载字体,只需将字体添加到您的收藏中,然后单击“下载您的收藏”链接。您可以下载字体以将其用于您的模型、文档或托管在您自己的服务器上。

This article将进一步一步一步地详细介绍如何做到这一点,它应该可以解决最终用户无法访问互联网的任何问题-只要您在CSS中正确定义了对字体的本地引用。

igetnqfo

igetnqfo2#

您应该从Google站点下载字体,然后使用FontSquirrel generator之类的字体文件生成器处理它,该生成器还会生成您可以使用的CSS文件。
关键是不同的浏览器需要不同的字体格式,使用合适的@font-face规则。
当你通过https://fonts.googleapis.com/css?family=Karla|Ubuntu这样的URL使用字体时,Google服务器会识别浏览器,并只发送为该浏览器定制的CSS代码。如果你只是将其复制到页面上,它只会在该浏览器和足够相似的浏览器上工作。

fslejnso

fslejnso3#

您可以自行托管Google字体,请阅读自行托管Web字体快速指南:https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts
在这里,您可以找到一个实际的例子,如何做到这一点:https://developers.google.com/fonts/docs/material_icons
设置方法1.通过Google Fonts使用-提供了一个如何通过fonts.googleapis.com使用Google Material Icons字体的示例。
设置方法2。自托管-提供了一个例子,说明如何相同的谷歌材料图标字体可以自托管。

相关问题