google fonts 国内使用解决方案
由于众所周知的原因,国内使用google font库有很大的问题。
解决方案1:使用国内镜像如360网站卫士常用前端公共库CDN服务
优点:使用方便
缺点:目标用户包含国外的开发者,不清楚国外用户的加载速度
解决方案2:提供另外一种解决方案,可以自主决定资源下载源,自主配置cdn等服务。
在google fonts 官网上选择字体并获取css链接,如下
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
将链接内容下载到本地保存,打开,内容如下:
/* 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;
}
/* 如下可能还有更多代码,但结构是和上面的一样的 */
将 @font-face 下 src属性下 url 处的文件下载到本地并保存,并将 url 地址修改成本地地址
引用修改后的本地google fonts css文件,就可以使用了。
参考资料:
google fonts 国内使用解决方案的更多相关文章
- 前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务
由于某些众所周知的原因,好多开源的 JS 库采用的国外 CDN 托管方式在国内访问速度不如人意.所以我们特意制作了这个公益项目,托管了 CDNJS 的所有开源 JS 库以及反代了 Google Fon ...
- bootstrap之google fonts
bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...
- 使用 Google Fonts 为网页添加美观字体
前言 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣. 说到字体,我们首先会想到 CSS 里面的 font,例如: & ...
- (转)Google Fonts 的介绍与使用
转载自“前端笔记” http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html Google Fonts 是什么?(以下翻译为 ...
- Google css & Google fonts
最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...
- 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 ...
- [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 ...
- 使用Google Fonts注意事项
Google Fonts是一个字体嵌入服务库. 这包括免费和开源字体系列.用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API. Google 字体库中的流行字 ...
- webpack 解决 semantic ui 中 google fonts 引用的问题
semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...
随机推荐
- JZ-057-二叉树的下一个结点
二叉树的下一个结点 题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目链接: 二叉树的下一个结点 代 ...
- github通过token提交代码
github通过token提交代码 生成token 个人头像->Setttings->Developer settings->Personal access tokens->G ...
- 矩池云里查看cuda版本
可以用下面的命令查看 cat /usr/local/cuda/version.txt 如果想用nvcc来查看可以用下面的命令 nvcc -V 如果环境内没有nvcc可以安装一下,教程是矩池云上如何安装 ...
- 微信小程序实现图表展示
开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...
- LGP3953题解
(口胡) 去年刚学 A_star 的时候以为是板子,上午推了一会儿之后受教了 遇到最短路的题先建最短路 DAG,虽然有0边但是先跑一个 Dijkstra. 然后设 \(d[u]\) 是从 \(1\) ...
- c++ set与unordered set的区别
c++ std中set与unordered_set区别和map与unordered_map区别类似,其底层的数据结构说明如下: 1.set基于红黑树实现,红黑树具有自动排序的功能,因此map内部所有的 ...
- 详解 Java 内部类
内部类在 Java 里面算是非常常见的一个功能了,在日常开发中我们肯定多多少少都用过,这里总结一下关于 Java 中内部类的相关知识点和一些使用内部类时需要注意的点. 从种类上说,内部类可以分为四类: ...
- 使用.Net6中的System.Text.Json遇到几个常见问题及解决方案
前言 以前.NetCore是不内置JSON库的,所以大家都用Newtonsoft的JSON库,而且也确实挺好用的,不过既然官方出了标准库,那更方便更值得我们多用用,至少不用每次都nuget安装Newt ...
- ubuntu20 源码安装nginx以及常用命令
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...
- [SPDK/NVMe存储技术分析]011 - 内核态ib_post_send()源码剖析
OFA定义了一组标准的Verbs,并在用户态提供了一个标准库libibverbs.例如将一个工作请求(WR)放置到发送队列的Verb API是ibv_post_send(), 但是在Linux内核,对 ...