CSS font-family常见中文字体对应的英文名称

by zhangxinxu from  http://www.zhangxinxu.com/wordpress/?p=5474

虽然一些常见中文字体,例如“宋体”,“微软雅黑”等,直接使用中文名称作为CSS font-family的属性值也能生效,但我们一般都不使用中文名称,而是使用英文名称,主要是规避乱码的风险。还有一些中文字体,直接使用中文名称作为CSS font-family的属性值是没有效果的,如“思源黑体”, “兰亭黑体”等,需要使用对应的英文字体名称才可以。

总而言之一句话,你要想使用中文字体,就必须要知道其对应的英文名称。

我在网上搜索相关资料的时候,发现几乎唯一流传一份 中英文对应数据是2010年某位同学整理的,现在已经2017年了,所以其中不少内容已经过时了,如“仿宋_GB2312”、“楷体_GB2312” windows7及其以后版本都没有了;同时有很多遗漏和缺失的地方,例如OS X新晋“苹方”等字体。

所以,我特意花了一两天的时间,对以往的数据进行了修正和补充,保证每一个字体都在不同系统下一个一个亲自测试验证,整理了一份更完善的中文字体英文名称对应关系一览表,您可以狠狠地点击这里: CSS font-family中文字体对应的英文名称一览表demo

列表不仅仅是显示了对应关系,本身就是基于自身所表示的字体来渲染的,因此,某种意义上可以检测你的电脑是否安装了此字体,例如,“黑体”这一个表格行的CSS font-family全部都是使用的“黑体”,并且可以切换为浏览器默认字体来对照效果,如下截图所示:


但是一种操作系统,肯定是无法看全所有字体效果的,因此你也可以直接看下面的完整的截图效果:

windows常见内置中文字体

OS X常见内置中文字体

OS X常见内置中文字体 x2

office安装后新增字体

开源字体部分
开源字体中英文对照

补充于2017-03-30
新增部分版权字体,如方正系列字体和汉仪系列字体的中文和英文对应关系图。

汉仪部分字体的中文和英文对照

方正系列字体中英文对照方正系列字体中英文对照2方正系列中英文字体对照3方正系列字体中英文对照4

关于中文字体对应英文名称的一些补充说明

  • “微软正黑体”一款全面支援ClearType技术的TrueType无衬线字体,用于繁体中文系统,例如中国台湾地区和香港澳门地区,相对应的,中国大陆地区的是微软雅黑,对于微软雅黑和微软正黑,不好简单的用简体或者繁体来区分他们,因为这两套字体都同时包含了比较完整的简繁体汉字,以确保在简体和繁体混排的页面上都能够完美的显示。但由于两岸的文教部门在各自的文字规范中对汉字的写法规定有很多细节上的不同,所以这两套字形在正式场合是不能混淆使用的。

  • 我们平常所说的“宋体”,都是指的“中易宋体”,英文名称SimSun,“黑体”类似的是“中易黑体”。在OS X常见内置中文字体中我罗列了一个“宋体-简”,需要注意的是,这个“宋体-简”和我们平常所说的“宋体”并不是同一个字体,其英文名称是“Songti SC”,需要注意甄别。

  • 尤其在OS X也就是苹果操作系统中的字体经常会出现“SC”,这个“SC”指的是“简体”(Simplified Chinese)的意思,相对应的还有“TC”,指的是“繁体”(Traditional Chinese)的意思。

  • Windows系统本身默认的中文字体并不多,和OS X操作系统相比就逊色很多,尤其OS X操作系统中的“翩翩体”,“手札体”这几个手写体就非常的赞!但是好在windows操作系统安装Office的比例相当高,因此如果不是要求非常严格的话,我们还是可以使用很多中文字体的。例如“华文行楷”,“华文新魏”,“华文隶书”等华文字体。

    其中,“华文黑体”和“华文细黑”有一段故事:OS X 10.6版本之前,“华文黑体”由“华文细黑(STXihei)”和“华文黑体(STHeiti)”这两个字重组成,但10.6之后“华文黑体”重组,就没有“华文细黑”这么一说了。因此,我把“华文细黑”归在了Office安装字体一类,而“华文黑体”归在OS X之中。根据我的测试,两个字体并不能随意互通有无,而且似乎还有浏览器有关系,OS X系统下,似乎Safari能够向下兼容“华文细黑”,Chrome却不可以;反过来,windows系统下,无法认识“华文黑体(STHeiti)”。

    又或者是使用“圆体”,windows系统下有个“幼圆”,OS X下有个“圆体-简”,都是统一风格的字体,也是可以在实际项目中尝试使用的。

  • 所有英文名称大小写都经过一定的考量,并不是随便设定的,虽然说CSS font-family对名称的大小写不怎么敏感,但是,根据我的经验,最好至少首字母要大写,否则在 使用CSS unicode-range的时候可能会踩到一些坑。

  • “思源黑体”是Adobe与Google宣布推出的一款开源字体,风格介于现代和传统之间。设计目标是可以广泛用于多种用途的计算机字体,比如用于手机、平板、或者桌面的用户界面、网页浏览或者电子书阅读等等,包含7个字重。很多网站以及很多资料都显示“思源黑体”英文名称是“Noto Sans CJK SC”,根据我的测试,windows和OS X操作系统下都是下是无效的,请使用我这里的“Source Han Sans CN”。
  • “汉仪旗黑”这种字体的字重非常丰富,比CSS font-weight支持的字重属性值还要多,上表仅示意了3个字重。而且根据我的测试,英文名称必须要带上对应的自重(就是40S, 50S之类的)才能有效果,这其实是有点怪的,也可能我使用方式不对吧,可见至少在web领域的使用上没有“思源黑体”那么友好。然后,该字体有版权,大家使用的时候悠着点。

  • “思源宋体”是
  • “文泉驿微米黑”是Google Droid的开源衍生字体。Droid字体系是Google包含在著名的开源手机平台Android系统中的默认字体,其中的Droid Sans Fallback包含CJK标准汉字16000余个,是目前所知为数不多的开源中文字体之一(也是继文泉驿正黑之后的第二个开源中文黑体)。由于该字体的设计目标为手机等嵌入式设备,与其他常见中文字体比较,一个显著的优点是文件极为精简,只有不到3M。另外该字体汉字字型设计也非常优雅,可以与 Windows/Mac OS系统中的界面字体媲美。

结束语

一人之力微薄,有错误或者疏漏之处在所难免,欢迎大力指证,一定及时更新。同时也欢迎各位同仁反馈其他一些常用中文字体CSS font-family使用的英文名称。

就这些,感谢阅读,希望本文的内容能够对您的学习有所帮助!

最后补充2017-03-31
为了证明效果,文章中的所有字体中文英文名称对照全部是截图,如果希望有文字版,请前往demo页面复制,地址为: //www.zhangxinxu.com/…/font-family-chinese-english.html

本文地址: http://www.zhangxinxu.com/wordpress/?p=5474

转自张鑫旭大神


小小小小小甲
关注 关注
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS英文中文字体分别设置不同的字体
WP8HUB
05-07 1万+
font-family的调用方法: div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei; } 根据font-family的原则,假如客户终端不认
常用字体名称中文对应英文
晴天小风的博客
11-14 965
常用字体名称中文对应英文 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 ...
CSS文本样式(一)
最新发布
qq_72013756的博客
08-21 1767
从零开始学前端
font-family
weixin_30633405的博客
07-19 70
来自 https://www.cnblogs.com/yimeishui/p/6198123.html, 如有侵权联系必删。 转 中文字体font-family常用列表Windows: 新細明體:PMingLiU細明體: MingLiU標楷體: DFKai-SB黑体: SimHei新宋体: NSimSun仿宋: FangSong楷体: KaiT...
如何设置font-family
weixin_30933531的博客
09-09 665
第一部分: 根据font-family的原则,假如客户终端不认识前面的字体,就自动切换到第二种字体,第二种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体根据font-family字体调用原则我们可以为英文,中文,等两种字体调用不同的字体来渲染.如:Arial,’Times New Roman’这两种字体不认识中文,只认识英文,所以,这两种字体只能渲染英文数字和一些特殊符号,而...
font-family 字体
weixin_33881140的博客
04-26 554
font-family: 'Microsoft Yahei', '微软雅黑', 'SimSun', 'SimHei', 'KaiTi', 'PingFang SC', Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;    ...
CSS font-family中文字体对应英文名称一览表
树上骑个猴的博客
05-07 305
链接 https://www.zhangxinxu.com/study/201703/font-family-chinese-english.html
font-family中文字体代码示例
12-13
1. **中文字体名称**:中文字体名称通常包含汉字,如楷体、仿宋等,同时,为了兼容不同的操作系统和浏览器,常常需要提供英文名称或使用GB2312编码的字体名。例如: - `KaiTi` 对应楷体,`KaiTi_GB2312` 是楷体的...
cssfont-family英文对照.js
08-18
CSS font-family常见中文字体对应英文名称,这个是收集的css中的font-family中的中英文对照,可以方便使用。
详解中文字体CSS样式中font-family对应英文名称
11-19
本文将详细介绍在CSS常见中文字体及其对应英文名称,帮助开发者更好地控制网页的视觉效果。 1. **宋体(SimSun)**:这是最常用的简体中文字体之一,其英文名称即为"SimSun"。宋体具有清晰的笔画和标准的字形...
CSS字体 ,文本属性
m0_72686745的博客
08-16 328
1.使用多个字体名称形成一个回退系统(也就是备用字体),当浏览器不支持第一个字体的时候则会尝试下一个字体,多个字体之间用逗号隔开。/*font-family:"宋体","微软雅黑";*//*与上一个相比产生的效果不同,谁在前使用哪一个*/方法:测量两行文字中间的间距,然后除以2,得到平均间距,拉出参考线,进行标注,方便测量。/*第一个任意改写一个系统不存在的字体,会按照第二个字体显示*//*font-family:"微软雅黑","宋体";顺序:文字的样式 文字的加粗 文字的字号/行高 文字的字体。...
特殊英文字体大全
10-26
特殊英文字体大全。 本人私藏 RAR文件,里面共有43中特殊英文字体,不可多得哦。 使用的时候将RAR文件解压后,得到43个压缩文件,每个压缩文件是一个字体,解压后靠背到系统文件的FONT文件夹中即可。
CSS 字体属性font相关的用法
12-11
1. **字体名称属性 (font-family)**: `font-family` 属性用于设置元素的字体常见字体宋体(Simsun)、Arial、Verdana、Helvetica以及无衬线字体(sans-serif)等。例如,`.ziti {font-family:Simsun,Arial,...
font-family解惑
weixin_33936401的博客
12-24 958
前言最近总是遇到了font-family的问题,借此机会总结一下font-family的原理和用法不同的系统里面内置的字体是不一样的,比如:微软的系统内置有微软雅黑,mac系统内置平方字体,而浏览器上的字体来自系统的字体,系统里面有什么字体,浏览器就有什么字体,两者是同步的。每个浏览器都有他们自己的默认字体,默认字体可以在设置里面重新设置,如果网页没有设置字体,那么同一张网页在不同的浏览器上就会显...
外部字体--繁体字
aopu7458的博客
09-19 236
由于font-family是没有直接繁体字的,需要引入外部字体 1.可以上网找找字体库,有ttf格式和其他的格式,然后在css里面通过css函数: @font-face { font-family: 'fontnameRegular'; src: url('fontname.eot'); src: local('fontname Regular'), local('fo...
CSS 中的字体兼容写法:用CSS英文中文字体分别设置不同的字体
weixin_33851177的博客
09-28 1031
  font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei;   根据font-family的原则,假如客户终端不认识前面的字体,就自动切换到第...
中文英文用不同的样式
weixin_33981932的博客
09-24 417
一、css方法: 先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文字体使用第二个字体“微软雅黑”。比如,可以这样来定义WordPress中的中英文字体: body{ font-family: Arial,"微软雅黑"; } *需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有...
html在不同浏览器文字不同,用 CSS3 指定网页的中英文分别使用不同字体
weixin_42298412的博客
06-09 435
为什么要分别给中英文指定不同字体?因为:1,一般的英文字体不带中文中文必须用不同的字体显示;2,一般的中文字体虽然会带英文,但往往比较难看,比专门的英文字体难看得多。所以,需要中英文用不同的字体显示。现在通常的做法是,在 CSS 里,把英文字体名字写在前面,中文字体名字写在后面。比如百度首页是这么写的:body{ font-family: arial, 宋体, sans-serif; }这样,理...
css font-family 苹方字体
05-12
苹方字体是一种由苹果公司开发的字体,它包括苹方简体和苹方繁体两种版本。如果你想在 CSS 中使用苹方字体,你需要先确认你的操作系统中是否已经安装了该字体。如果已经安装,则可以在 CSS 中使用以下代码来设置字体: ``` font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; ``` 其中,“PingFang SC”是苹方简体字体的名称,“Helvetica Neue”和“Microsoft YaHei”是作为备选字体的其他字体名称。如果用户的操作系统中没有安装苹方字体,则会自动使用其他备选字体来代替。
写文章

热门文章

  • 纯CSS美化单复选框(checkbox、radio) 24373
  • jquery验证手机号是否正确实例讲解 11409
  • CSS font-family常见中文字体对应的英文名称 9896
  • 用JS获取地址栏参数的方法(超级简单) 448
  • 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别 349

最新评论

  • 纯CSS美化单复选框(checkbox、radio)

    qq_40029202: 样式有用

  • jquery验证手机号是否正确实例讲解

    渣男程序员: 你确定这个可以运行? ajax执行速度能跟上?

  • jquery验证手机号是否正确实例讲解

    渣男程序员: function checkPhoneIsExist(){ var phone = jQuery("#phone").val(); var flag = true; jQuery.ajax( { url: "checkPhone?t=" + (new Date()).getTime(), data:{phone:phone}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "0"){ flag = false; } } }); return flag; }

  • jquery验证手机号是否正确实例讲解

    渣男程序员: 我想说你写出来这个你自己试过吗?

最新文章

  • javascript闭包的理解
  • 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
  • 用JS获取地址栏参数的方法(超级简单)
2017年6篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家公园摆件玻璃钢雕塑报价表福建超市商场美陈厂家直销彩色玻璃钢雕塑厂有没有深圳玻璃钢卡通雕塑艺术品商场电梯区域美陈瑞金玻璃钢花盆花器河北装饰商场美陈采购滨州玻璃钢海豚雕塑上饶玻璃钢景观雕塑新乡玻璃钢雕塑哪家好郑州商场美陈装饰理念和县玻璃钢雕塑安顺商场美陈上海玻璃钢卡通牛雕塑批发商丘园林校园玻璃钢雕塑厂家银川玻璃钢景观雕塑造型精美锦州园林玻璃钢雕塑生产厂家玻璃钢海洋雕塑哪家比较好深圳佛像玻璃钢雕塑设计公司昆明玻璃钢雕塑优势北京玻璃钢雕塑造型玻璃钢雕塑沈阳大昆明景区玻璃钢雕塑制作深圳常用商场美陈费用贵州城市景观雕塑玻璃钢仙林商场春节美陈玻璃钢雕塑定制公司石家庄市政玻璃钢雕塑服务介绍牟平玻璃钢花盆花器玻璃钢人物玻璃钢景观雕塑定制香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化