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. jquery 文本/html/值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Guava学习-缓存

    Guava的缓存是本地缓存,所以我觉得在使用场景上适合那种并非是高一致性的场景中,而且他的实现和ConcurrentHashMap很类似.但是毕竟是缓存嘛,肯定有自动清除的功能.外加一些什么清除策略等 ...

  3. 使用TabPageIndicator的样式问题

    在使用TabPageIndicator往往会出现一些样式问题,导致看不到字,下面是总结的步骤: 1.布局<LinearLayout xmlns:android="http://sche ...

  4. ProxyPattern

    代理模式是aop编程的基础,其主要作用是操作对象,并将你需要的新功能切入若干个你想要的切入点,静态代理模式比较简单,但是缺点比较大,这里就不上代码了,下面写上动态代理模式的代码(jdk方式,而不是采用 ...

  5. Net环境下比较流行的ORM框架对比

    个人感觉在Java领域大型开发都离不了ORM的身影,所谓的SSH就是Spring+Struts+Hibernate,除了在学习基础知识的时候被告知可以使用JDBC操作数据库之外,大量的书籍中都是讲述使 ...

  6. JSP利用Hibernate实现对数据库的CRUD ——开发环境Myeclipse与SQL Server 2008

    一.首先先建立一个Web Project 二.然后在程序根目录建立文件夹“DataBase”和“Doc”,分别存放数据库文件和保存SQL语句,建完如下所示: 三.建立数据库“dbHibernate”, ...

  7. 通过Laravel 初识Vue.js

    最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...

  8. 工行ATM转账——事务操作

    今儿去工行ATM给已朋友转账,遇到这么个情况: 选择对外转账后输入转入账号(输入两次),接着提示输入转入金额(输入一次金额),按确定,系统提示交易中,3秒左右,提示“输入账号无效”,系统自动中断了操作 ...

  9. HTML5 Canvas眨眼睛动画

    效果请看: http://keleyi.com/a/bjad/p9exlcwi.htm 请使用支持HTML5的浏览器查看效果. 以下是代码: <html> <body> < ...

  10. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十三）台风模块

    config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config ...