前端开发

前端开发

首页 新闻中心 前端开发 在web页面中使用Google思源宋体,思源黑体

在web页面中使用Google思源宋体,思源黑体

作者:金睿网络 时间:2021-03-16 来源:0771-china.com
GoogleFonts网站已经有超过900个字体库,使用GoogleFonts是免费,这意味着使用GoogleFonts上的字体,不用担心收到罚款单。不过中文字体有点少,简体中文只有5个,繁体中文有2个,还是重复的,就是思源宋体和思源黑体..

Google Fonts网站已经有超过900个字体库,使用Google Fonts是免费,这意味着使用Google Fonts上的字体,不用担心收到罚款单。不过中文字体有点少,简体中文只有5个,繁体中文有2个,还是重复的,就是思源宋体和思源黑体。

Google Fonts

可惜,(https://fonts.google.com)在大陆不能直接访问。

无法访问

在搜索Google Fonts的时候,可以找到谷歌字体中文版网站(https://www.font.im,http://www.googlefonts.cn,两个域名指向同一个IP),风格和https://fonts.google.com是一样的,不过谷歌字体中文版有些问题(2019/4/26,至少现在),有些字体点击无反应,要切到英文字体,字体也没有Google Fonts那么多。


谷歌字体中文版

这里要说的是用Google Fonts的,Google Fonts在大陆内有一些公司或组织弄了CDN加速,比如中科大

在https://lug.ustc.edu.cn/wiki/lug/services/googlefonts这里有说到

LUG@USTC Google Fonts 加速服务

使用上面的网址,比如https://fonts.lug.ustc.edu.cn/css?family=Noto+Serif+SC,它会重定向到https://fonts.proxy.ustclug.org/css?family=Noto+Serif+SC,第一次使用的时候,文字部分没有马上加载出来,而是空白,等到重定向并下载完后才显示出来,所以在引用的时候,直接用fonts.proxy.ustclug.org是不是会更好。

Google Fonts网站虽然不能访问,但引用的资源却能正常使用,当然,无法通过Google Fonts网站查找想要的字体,资源能访问也是白搭,这里提供思源宋体,思源黑体的引用链接:

黑体:https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900

黑体有6个不同的宽度,对应如下:

不同宽度

其中Regular 400是默认的宽度,如果不想要这么多,可以直接使用:

https://fonts.googleapis.com/css?family=Noto+Sans+SC:100

Regular的可以省略后面的宽度:

https://fonts.googleapis.com/css?family=Noto+Sans+SC

宋体:https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900

宋体有7个宽度,其中Regular 400是默认的宽度:

不同宽度

黑体宋体一起使用:https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900|Noto+Serif+SC:200,300,400,500,600,700,900

用手机扫描二维码 关闭
二维码