ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

google fonts 国内使用解决方案

2020-05-23 20:03:31  阅读:597  来源: 互联网

标签:google 解决方案 fonts https Oswald font com


由于众所周知的原因,国内使用google font库有很大的问题。

解决方案1:使用国内镜像如360网站卫士常用前端公共库CDN服务

  • 优点:使用方便

  • 缺点:目标用户包含国外的开发者,不清楚国外用户的加载速度

解决方案2:提供另外一种解决方案,可以自主决定资源下载源,自主配置cdn等服务。

  1. google fonts 官网上选择字体并获取css链接,如下

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  1. 将链接内容下载到本地保存,打开,内容如下:

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), 
       local('Oswald-Regular'), 
       url(https://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* 如下可能还有更多代码,但结构是和上面的一样的 */
  1. 将 @font-face 下 src属性下 url 处的文件下载到本地并保存,并将 url 地址修改成本地地址

  2. 引用修改后的本地google fonts css文件,就可以使用了。

参考资料:

标签:google,解决方案,fonts,https,Oswald,font,com
来源: https://www.cnblogs.com/10manongit/p/12944182.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有