我正在做一个网页布局模板,我已经下载,我注意到一些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
3条答案
按热度按时间rjzwgtxy1#
您可能希望在Google FAQ中查看有关此主题的这一部分
**我可以将Google Fonts上的字体下载到我自己的计算机上吗?**可以。要下载字体,只需将字体添加到您的收藏中,然后单击“下载您的收藏”链接。您可以下载字体以将其用于您的模型、文档或托管在您自己的服务器上。
This article将进一步一步一步地详细介绍如何做到这一点,它应该可以解决最终用户无法访问互联网的任何问题-只要您在CSS中正确定义了对字体的本地引用。
igetnqfo2#
您应该从Google站点下载字体,然后使用FontSquirrel generator之类的字体文件生成器处理它,该生成器还会生成您可以使用的CSS文件。
关键是不同的浏览器需要不同的字体格式,使用合适的
@font-face
规则。当你通过https://fonts.googleapis.com/css?family=Karla|Ubuntu这样的URL使用字体时,Google服务器会识别浏览器,并只发送为该浏览器定制的CSS代码。如果你只是将其复制到页面上,它只会在该浏览器和足够相似的浏览器上工作。
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。自托管-提供了一个例子,说明如何相同的谷歌材料图标字体可以自托管。