由于众所周知的原因,国内使用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 国内使用解决方案的更多相关文章

  1. 前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

    由于某些众所周知的原因,好多开源的 JS 库采用的国外 CDN 托管方式在国内访问速度不如人意.所以我们特意制作了这个公益项目,托管了 CDNJS 的所有开源 JS 库以及反代了 Google Fon ...

  2. bootstrap之google fonts

    bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...

  3. 使用 Google Fonts 为网页添加美观字体

    前言 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣. 说到字体,我们首先会想到 CSS 里面的 font,例如: & ...

  4. (转)Google Fonts 的介绍与使用

    转载自“前端笔记”  http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html Google Fonts 是什么?(以下翻译为 ...

  5. Google css & Google fonts

    最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...

  6. Get Started with the Google Fonts API

    Get Started with the Google Fonts API This guide explains how to use the Google Fonts API to add fon ...

  7. [PostCss] Easily Load Google Fonts with PostCSS Font Magician

    Configuring Google Fonts can be quite an annoying process to setup. Using Font Magician with PostCSS ...

  8. 使用Google Fonts注意事项

    Google Fonts是一个字体嵌入服务库. 这包括免费和开源字体系列.用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API. Google 字体库中的流行字 ...

  9. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

随机推荐

  1. JZ-057-二叉树的下一个结点

    二叉树的下一个结点 题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目链接: 二叉树的下一个结点 代 ...

  2. github通过token提交代码

    github通过token提交代码 生成token 个人头像->Setttings->Developer settings->Personal access tokens->G ...

  3. 矩池云里查看cuda版本

    可以用下面的命令查看 cat /usr/local/cuda/version.txt 如果想用nvcc来查看可以用下面的命令 nvcc -V 如果环境内没有nvcc可以安装一下,教程是矩池云上如何安装 ...

  4. 微信小程序实现图表展示

    开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...

  5. LGP3953题解

    (口胡) 去年刚学 A_star 的时候以为是板子,上午推了一会儿之后受教了 遇到最短路的题先建最短路 DAG,虽然有0边但是先跑一个 Dijkstra. 然后设 \(d[u]\) 是从 \(1\) ...

  6. c++ set与unordered set的区别

    c++ std中set与unordered_set区别和map与unordered_map区别类似,其底层的数据结构说明如下: 1.set基于红黑树实现,红黑树具有自动排序的功能,因此map内部所有的 ...

  7. 详解 Java 内部类

    内部类在 Java 里面算是非常常见的一个功能了,在日常开发中我们肯定多多少少都用过,这里总结一下关于 Java 中内部类的相关知识点和一些使用内部类时需要注意的点. 从种类上说,内部类可以分为四类: ...

  8. 使用.Net6中的System.Text.Json遇到几个常见问题及解决方案

    前言 以前.NetCore是不内置JSON库的,所以大家都用Newtonsoft的JSON库,而且也确实挺好用的,不过既然官方出了标准库,那更方便更值得我们多用用,至少不用每次都nuget安装Newt ...

  9. ubuntu20 源码安装nginx以及常用命令

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...

  10. [SPDK/NVMe存储技术分析]011 - 内核态ib_post_send()源码剖析

    OFA定义了一组标准的Verbs,并在用户态提供了一个标准库libibverbs.例如将一个工作请求(WR)放置到发送队列的Verb API是ibv_post_send(), 但是在Linux内核,对 ...