| 如何在CSS中使用思源宋体字体家族 | 您所在的位置：网站首页 › 思源黑体和宋体 › 如何在CSS中使用思源宋体字体家族 |
|
本文作者: jsweibo
本文链接: https://jsweibo.github.io/2019/10/28/%E5%A6%82%E4%BD%95%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%80%9D%E6%BA%90%E5%AE%8B%E4%BD%93%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F/
摘要 本文主要讲述了： 什么是思源宋体 如何在 CSS 中使用思源宋体字体家族 正文什么是思源宋体思源宋体，英文名为 Source Han Serif，是继思源黑体之后，由 Adobe 和 Google 领导的技术团队于 2017 年 4 月 3 日推出的一款开源的有衬线的字体家族。 思源宋体支持 4 种文字： 简体中文 繁体中文 日文 朝鲜文（即韩文）思源宋体从细到粗共有 7 种字重： ExtraLight Light Regular Medium SemiBold Bold Heavy其中，每一种字重都包括 65535 个字形，思源宋体一共包含 458745 个字符。 思源宋体的字体文件在 Github 上开放下载（注意：在release分支上），中国大陆地区的用户也可以在清华大学镜像站进行下载。 如何在 CSS 中使用思源宋体字体家族示例： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 Document 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 思源宋体字体家族 /* 对照组 */ .control-group { font-size: 64px; } /* 思源宋体字体家族 */ .source-han-serif > div { font-size: 64px; } .source-han-serif > div:nth-child(1) { font-family: 'Source Han Serif ExtraLight'; } .source-han-serif > div:nth-child(2) { font-family: 'Source Han Serif Light'; } .source-han-serif > div:nth-child(3) { font-family: 'Source Han Serif'; } .source-han-serif > div:nth-child(4) { font-family: 'Source Han Serif Medium'; } .source-han-serif > div:nth-child(5) { font-family: 'Source Han Serif SemiBold'; } .source-han-serif > div:nth-child(6) { font-family: 'Source Han Serif'; font-weight: bold; } .source-han-serif > div:nth-child(7) { font-family: 'Source Han Serif Heavy'; } window.addEventListener('load', function () { document.body.appendChild(document.createElement('hr')); const foo = document.createElement('div'); foo.textContent = navigator.userAgent; document.body.appendChild(foo); document.body.appendChild(document.createElement('hr')); });测试结果： System Browser Name Browser Version Result Windows 10 IE 11.0 测试通过 Windows 10 Firefox 78.0 测试通过 Windows 10 Edg 83.0.478.58 测试通过 Windows 10 Chrome 83.0.4103.116 测试通过 参考资料 思源宋体 思源宋体 思源宋体 清华大学镜像 本文作者: jsweibo 本文链接: https://jsweibo.github.io/2019/10/28/%E5%A6%82%E4%BD%95%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%80%9D%E6%BA%90%E5%AE%8B%E4%BD%93%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F/ 本文对你有帮助？请支持我 支付宝 微信 本文作者： jsweibo 本文链接： https://jsweibo.github.io/2019/10/28/%E5%A6%82%E4%BD%95%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%80%9D%E6%BA%90%E5%AE%8B%E4%BD%93%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F/ 版权声明： 除非另有说明，否则本网站上的内容根据署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |