转载
这位老哥 zenozeng/fonts.css 的项目。
相关链接：
https://github.com/zenozeng/fonts.css
http://zenozeng.github.io/fonts.css/
这个的主要作用是在项目中引入 fonts.css 之后，在 html 标签中直接使用类似于 font-kai class 属性，该 div 的字体就是楷体
<divclass="font-kai">感谢您的协助!</div>
其实都是系统自带的，现在可以跨了平台不用自己兼容了
Fonts.css -- 跨平台中文字体解决方案
Note: 下滑线标注的为本地存在的字体，关于测试字体的方法，可以看我这个 Repo
  • Windows
  • Mac
  • Linux

黑体

24px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
18px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
16px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
14px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
12px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.

.font-hei
Apple System，Helvetica Neue，Helvetica，Nimbus Sans L，Arial，Liberation Sans，PingFang，冬青黑，思源黑体，微软雅黑，文泉驿微米黑，文泉驿正黑，华文黑体，中易黑体，文泉驿点阵正黑
font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  • >Use apple system font (like San Francisco) by default, see also: https://github.com/zenozeng/fonts.css/issues/29
  • >某些 Linux 中 Helvetica 会自动 fallback 到 Nimbus Sans L （具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid ）
  • >某些 Linux 中 Arial 会自动 fallback 到 Liberation Sans （具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid ）

  • Windows
  • Mac
  • Linux

楷体

24px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
18px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
16px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
14px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
12px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.

.font-kai
Baskerville，Georgia，Liberation Serif，Kaiti SC，华文楷体，AR PL UKai，文鼎ＰＬ简中楷，楷体，標楷體，全字库正楷体
font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;

  • Windows
  • Mac
  • Linux

宋体

24px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
18px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
16px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
14px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
12px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.

.font-song
Georgia，Nimbus Roman No9，Songti SC，华文宋体，AR PL New Sung，文鼎ＰＬ简报宋，新宋体，中易宋体，全字库正宋体，文泉驿点阵宋，AR PL UMing，新细明体，细明体
font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;

  • Windows
  • Mac

仿宋

24px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
18px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
16px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
14px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.
12px我能吞下玻璃而不伤身体，The quick brown fox jumps over the lazy dog.

.font-fang-song
Baskerville，Times New Roman，Liberation Serif，华文仿宋，仿宋，CWTEX仿宋体
font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
  • >某些 Linux 中 Times New Roman 会自动 fallback 到 Liberation Serif （具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid ）
  • >CWTEX仿宋体是繁体字型

0

【转载】Fonts.css -- 跨平台中文字体解决方案相关推荐

  1. CSS常用中文字体的英文名称对照表

    CSS常用中文字体的英文名称对照表如下: Windows自带的字体 新细明体:PMingLiU 细明体:MingLiU 标楷体:DFKai-SB 黑体:SimHei 宋体:SimSun 新宋体:NSi ...

  2. html font-family设置无效,HTML+CSS入门 CSS设置中文字体(font-family:黑体)后样式失效问题如何解决...

    本篇教程介绍了HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. ...

  3. CSS font-family中文字体英文名称展示

    CSS font-family中文字体英文名称展示 一些常见中文字体,例如"宋体","微软雅黑"等,直接使用中文名称作为CSS  font-family 的属性 ...

  4. 转载：Ununtu下中文乱码解决方案

    转载: 添加中文字符编码: $sudo vim /var/lib/locales/supported.d/local #添加下面的中文字符集 zh_CN.GBK GBK zh_CN.GB2312 GB ...

  5. html设置幼圆字体,CSS font-family中文字体设置方法

    网站上的字体样式都是通过CSS来控制的,CSS font-family属性可以设置文字字体样式. 常用的网站字体设置代码如下: body{font-family:"Microsoft Yah ...

  6. css控制中文字体间距

    平时在使用模板,特别是外国人开发的模板的时候,用中文字体会比较难看,css可以控制中文字体的间距,还有是什么字体. word-spacing是英文单词的间距. 如果要是单个的中文字符的话要用lette ...

  7. css常用中文字体的英文名称写法

    我们知道网页中使用中文字体最好用其对应的英文名称,这样可以避免出现编码问题导致样式中的中文名称出现乱码,从而不识别.下面是网页中常用的中文字体所对应的英文名称.留着,不用翻资料了 中文 英文 宋体 S ...

  8. Typora的中文字体解决方案

    首先声明: 这是我第一次写博客,可能会写的比较丑,望见谅.我会尽量将问题讲清楚的. ---------------------------------------------------------- ...

  9. html font-family设置无效,css设置中文字体(font-family:黑体)后样式失效问题

    做项目时偶遇的一诡异问题,同样的代码,在ff和IE7以上页面显示正常,但IE6无论怎么改都不起作用,本来以为是IE6的某些浮动bug所致,结果弄了很长时间也不行,后来不经意间把原来设定的font-fa ...

最新文章

  1. 3d slicer调整窗宽窗位_3D人脸模型月销量上千单，谁在打印，谁在帮打？
  2. 用 LaTeX 排版编程技术书籍的一些个人经验
  3. spring注解方式注入bean
  4. asp.net core 6 新特性，支持HTTP/3 端点发布
  5. iOS开发－Object-C获取手机设备信息（UIDevice）
  6. 基于STM32F4的舵机控制
  7. 英魂之刃显示已将战斗服务器,英魂之刃战略版来袭，是挂名游戏还是搞事情？玩家：过于真实！...
  8. Nginx 如何开启gzip 来提高页面加载速度
  9. 在.net 应用MD5加密
  10. web网页设计实例作业 ——丝绸之路 (6页) 简单个人网页设计作业 静态HTML文化主题网页
  11. 水位传感器工作原理及应用
  12. 计算机科学与技术影视,计算机科学与技术专业--水墨的影视艺术语言的研究
  13. 阿里云盘登录空白问题解决
  14. win10 1050ti anaconda搭建tensorflow-gpu
  15. mri计算机系统,MRI的一些基本介绍
  16. dropzone js video上传使用frame-grap.js生成缩略图
  17. STP保护、MSTP笔记（华为）
  18. c语言程序学生籍贯信息记录,c语言程序学生籍贯信息记录簿设计.doc
  19. 计算机网络中的冗余部件大大降低了可靠,大学计算机第七篇练习题
  20. 计算机科学创新大赛,计算机学院大学生创新项目入围挑战杯大赛

热门文章

  1. python怎么取小数_python取小数点
  2. linux详细入门教程（一）------linux概述
  3. SONET、PDH、SDH、WDM的一些基本问题（整理）
  4. Metapsloit后渗透Windows攻击(亲测metepreter使用教程)
  5. 国行new moto x升级android6,喜大普奔：国行MOTO升级Android6.0计划终于来了
  6. 用树莓派计算模块搭建的工业单板计算机（转）
  7. HDU 2389(二分最大匹配优化算法，Hopcroft-Carp)
  8. MDaemon Server Pro 7.22英文正式版
  9. mysql只读库的数据同步_mysql只读模式下数据迁移，保证数据一致性
  10. ElasticSearch操作Go