CSS 之 平时那些你不敢用的字体

网上找找,无非如下一些中规中矩的结果:

Windows下建议字体:

字体名称

对应英文

宋体

SimSun

黑体

SimHei

微软雅黑

Microsoft YaHei

微软正黑体

Microsoft JhengHei

新宋体

NSimSun

新细明体

PMingLiU

细明体

MingLiU

标楷体

DFKai-SB

仿宋

FangSong

楷体

KaiTi

仿宋_GB2312

FangSong_GB2312

楷体_GB2312

KaiTi_GB2312

Mac OS下建议字体：

华文细黑

STHeiti Light [STXihei]

华文黑体

STHeiti

华文楷体

STKaiti

华文宋体

STSong

华文仿宋

STFangsong

俪黑 Pro

LiHei Pro Medium

俪宋 Pro

LiSong Pro Light

标楷体

BiauKai

苹果俪中黑

Apple LiGothic Medium

苹果俪细宋

Apple LiSung Light

安装完Office后自带的字体:

隶书

LiSu

幼圆

YouYuan

华文细黑

STXihei

华文楷体

STKaiti

华文宋体

STSong

华文中宋

STZhongsong

华文仿宋

STFangsong

方正舒体

FZShuTi

方正姚体

FZYaoti

华文彩云

STCaiyun

华文琥珀

STHupo

华文隶书

STLiti

华文行楷

STXingkai

华文新魏

STXinwei

注:Windows 中的中文字体在默认情况下(也就是未自行安装新字体或者 Office 等文字处理软件的情况下)Windows 默认提供下列字体：

  • Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
  • Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)
  • Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB

那么每种字体能显示那些汉字呢？

  • Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集，楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。（注：Windows 3.X 只能支持 GB2312-80 字符集）
  • Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集，SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。

下面对字符集进行简单的介绍：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。

GB2312-80 是最早的版本，字符数比较少；

GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同；

GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同，主要增加了扩展 A 部分；

GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同，主要增加了扩展 B 部分；

由于 Unicode 5.2 的发布，估计 GB18030 会在近期发布新版本，增加扩展 C 部分。

需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

如果想查看 GB18030 的标准文本，请访问 http://www.gb168.cn 中的强标阅读。

如果想了解 Unicode 的内容，请访问 http://www.unicode.org。

现在纠正网上普遍的一个错误：

GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号

与简体中文有关的代吗页如下：

936 gb2312 简体中文(GB2312)————其实是GBK

10008 x-mac-chinesesimp 简体中文(Mac)

20936 x-cp20936 简体中文(GB2312-80)

50227 x-cp50227 简体中文(ISO-2022)

51936 EUC-CN 简体中文(EUC)

52936 hz-gb-2312 简体中文(HZ)

54936 GB18030 简体中文(GB18030)

补充：

使用楷体_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再显示为对应的字体。

这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认情况下没有楷体_GB2312、仿宋_GB2312，字体名称相差"_GB2312"。

在CSS文件中，我们常看到有些字体名称变成了乱码，这是由于编写者将中文字体的名字直接写成了中文，并且再上传或者拷贝复制的时候无意间变成了乱码。为了避免这种状况出现，在CSS文件中使用中文字体时，最好使用中文字体的英文名称，我们常用中文字体的英文名称对照表如下：

Windows、Mac OS和Office自带的字体中英文对照表：

中文名

英文名

Unicode

Unicode 2

Mac OS

华文细黑

STHeiti Light [STXihei]

\534E\6587\7EC6\9ED1

华文细黑

华文黑体

STHeiti

\534E\6587\9ED1\4F53

华文黑体

华文楷体

STKaiti

\534E\6587\6977\4F53

华文楷体

华文宋体

STSong

\534E\6587\5B8B\4F53

华文宋体

华文仿宋

STFangsong

\534E\6587\4EFF\5B8B

华文仿宋

丽黑 Pro

LiHei Pro Medium

\4E3D\9ED1 Pro

丽黑 Pro

丽宋 Pro

LiSong Pro Light

\4E3D\5B8B Pro

丽宋 Pro

标楷体

BiauKai

\6807\6977\4F53

标楷体

苹果丽中黑

Apple LiGothic Medium

\82F9\679C\4E3D\4E2D\9ED1

苹果丽中黑

苹果丽细宋

Apple LiSung Light

\82F9\679C\4E3D\7EC6\5B8B

苹果丽细宋

Windows

新细明体

PMingLiU

\65B0\7EC6\660E\4F53

新细明体

细明体

MingLiU

\7EC6\660E\4F53

细明体

标楷体

DFKai-SB

\6807\6977\4F53

标楷体

黑体

SimHei

\9ED1\4F53

黑体

宋体

SimSun

\5B8B\4F53

宋体

新宋体

NSimSun

\65B0\5B8B\4F53

新宋体

仿宋

FangSong

\4EFF\5B8B

仿宋

楷体

KaiTi

\6977\4F53

楷体

仿宋_GB2312

FangSong_GB2312

\4EFF\5B8B_GB2312

仿宋_GB2312

楷体_GB2312

KaiTi_GB2312

\6977\4F53_GB2312

楷体_GB2312

微软正黑体

Microsoft JhengHei

\5FAE\x8F6F\6B63\9ED1\4F53

微软正黑体

微软雅黑

Microsoft YaHei

\5FAE\8F6F\96C5\9ED1

微软雅黑

Office

隶书

LiSu

\96B6\4E66

隶书

幼圆

YouYuan

\5E7C\5706

幼圆

华文细黑

STXihei

\534E\6587\7EC6\9ED1

华文细黑

华文楷体

STKaiti

\534E\6587\6977\4F53

华文楷体

华文宋体

STSong

\534E\6587\5B8B\4F53

华文宋体

华文中宋

STZhongsong

\534E\6587\4E2D\5B8B

华文中宋

华文仿宋

STFangsong

\534E\6587\4EFF\5B8B

华文仿宋

方正舒体

FZShuTi

\65B9\6B63\8212\4F53

方正舒体

方正姚体

FZYaoti

\65B9\6B63\59DA\4F53

方正姚体

华文彩云

STCaiyun

\534E\6587\5F69\4E91

华文彩云

华文琥珀

STHupo

\534E\6587\7425\73C0

华文琥珀

华文隶书

STLiti

\534E\6587\96B6\4E66

华文隶书

华文行楷

STXingkai

\534E\6587\884C\6977

华文行楷

华文新魏

STXinwei

\534E\6587\65B0\9B4F

华文新魏

========================分割线======================
 接下来,进入正题,尝试一些新鲜的字体(Windows下,你也可以用 字体试衣间 等软件查看你机器上的字体),并用

"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"

做对比:

  1. Algerian"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  2. Andalus"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  3. Aparajita"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  4. Arial"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  5. Arial Unicode MS"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  6. Baskerville Old Face"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  7. Batang"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  8. Bell MT"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  9. Broadway"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  10. Colonna MT"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  11. Comic Sans MS"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  12. Consolas"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  13. Constantia"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  14. Cooper Black"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  15. Courier"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  16. Courier New"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  17. DFKai-SB"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  18. Dotum"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  19. Ebrima"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  20. Freestyle Script"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  21. Georgia"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  22. Gisha"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  23. Harrington"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  24. Impact"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  25. Informal Roman"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  26. Iskoola Pota"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  27. JasmineUPC"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  28. Jokerman"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  29. Juice ITC"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  30. Kokila"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  31. Kunstler Script"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  32. Lao UI"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  33. Latha"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  34. Levenim MT"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  35. LilyUPC"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  36. Lucida Calligraphy"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  37. Lucida Handwriting"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  38. Magneto"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  39. Matura MT Script Capitals"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  40. Meiryo UI"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  41. Mistral "一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  42. Microsoft YaHei"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  43. Microsoft JhengHei"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  44. MS Serif"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  45. MV Boli"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  46. Niagara Engraved"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  47. Old English Text MT"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  48. Script"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  49. Segoe UI"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  50. Vivaldi"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  51. Vrinda"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  52. Wide Latin"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  53. FZShuTi"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  54. SimSun"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  55. STCaiyun"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  56. STXingkai"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  57. STLiti"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  58. Tahoma"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"

一些第三方字体:

  1. XinGothic CiticPress"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  2. XinGothic-ZhangYue W6"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  3. Hiragino Sans GB W3"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  4. Droid Sans Fallback"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  5. Helvetica Neue Medium Extended"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  6. FreeSans"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"
  7. Liberation Sans"一二三四五ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz六七八九十"

一些字体不全的童鞋,给你们截个图看看:

所以呢?

说重点,为了让那种只有系统自带字体的用户有更好的浏览体验:

  1. 做网页,如果要中规中矩的:font 从'Microsoft YaHei','Microsoft JhengHei','Vrinda','Andalus','Courier New','Tahoma','Lao UI','Latha','Meiryo','Georgia'里面选,

    比如:font-family: 'Microsoft YaHei','Vrinda','Courier New','Microsoft JhengHei','Andalus','Lao UI','Tahoma','Latha','Meiryo','sans-serif';

  2. 像我这种比较另类的: font从'Comic Sans MS','Impact','MV Boli'里面选,

    比如:font-family: 'Comic Sans MS','MV Boli','Impact','Microsoft YaHei','sans-serif';

[No000042]CSS 之 平时那些你不敢用的字体的更多相关文章

  1. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  2. CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标

    HTML <a href="javascript:volid(0);"><i class="icon-table"></i> ...

  3. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  4. css 的包含块 、负外边距，字体，文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  5. css实现容器垂直水平居中的七中方法

    方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: center;jus ...

  6. 【原】用css让一个容器水平垂直

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...

  7. 七种css方式让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  8. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  9. 【转】10条你不可不知的css规则

    10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...

随机推荐

  1. ABP中使用OAuth2(Resource Owner Password Credentials Grant模式)

    ABP目前的认证方式有两种,一种是基于Cookie的登录认证,一种是基于token的登录认证.使用Cookie的认证方式一般在PC端用得比较多,使用token的认证方式一般在移动端用得比较多.ABP自 ...

  2. tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end with a '/'. The path [/] does not meet these criteria and has been changed to []

    tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end w ...

  3. ABP 初探 之 多语言

    最近几天空闲时间比较多,就研究Abp的多语言,Abp是基于接口的依赖注入,有很多思想与方法都很好,需自己深入体会与应用,转化成自己的思想应用于实践. 本篇介绍基于 开源Demo ModuleZeroS ...

  4. CoreGraphics-线段常见属性及渲染模式介绍

    线段常见属性: 1.线宽 2.线头样式 3.接头样式 4.颜色(包括描边颜色和填充颜色) override func draw(_ rect: CGRect) { // 获取图形上下文对象 let c ...

  5. Java基础知识

    1.java中的短路与(&&).短路或(||) 与 逻辑与(&).逻辑或(|)有什么区别啊? 最佳答案 &是java中的位逻辑运算: eg: 2&3=2: 分析 ...

  6. 【Swift】iOS 9 Core Spotlight

    前言 感觉 Spotlight 这个功能还是蛮有用的,能提升用户活跃,增加应用内容曝光几率. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: ...

  7. MPMoviePlayerController属性，方法，通知整理

    属性 说明 @property (nonatomic, copy) NSURL *contentURL 播放媒体URL,这个URL可以是本地路径,也可以是网络路径 @property (nonatom ...

  8. [转]完美洗牌（Perfect Shuffle）问题

    [转]原博文地址:https://github.com/julycoding/The-Art-Of-Programming-By-July/blob/master/ebook/zh/02.09.md ...

  9. Windows 8.1 低功耗蓝牙开发

    1. 概述 在蓝牙4.0发布以前,给大家的直观印象就是蓝牙耳机,它就是用来满足短距离内中等带宽的音频通信需求.然而蓝牙4.0发布之后,用途就大不一样了,特别是现在物联网和可穿戴之风盛行的年代,很多小玩 ...

  10. SQL*Plus环境变量设置浅析

    SQL*Plus的使用环境是可以通过login.sql 或 glogin.sql脚本来设置的,可能很多初学者或不习惯使用SQL*Plus的老鸟都不知道.因为在如今UI工具(Toad.PL/SQL De ...