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. composer 代码库管理

    composer 代码库管理 参考资料:https://packagist.org/about#naming-your-package简介composer 命令的请求源是 packagist.org* ...

  2. Java IO之字节流

    Java中的输入是指从数据源等读到Java程序中,这里的数据源可以是文件,内存或网络连接,输出则是指从Java程序中写到目的地. 输入输出流可以分为以下几种类型(暂时不考虑File类) 类名 中文名 ...

  3. Python中三目计算符的正确用法及短路逻辑

    今天在看别人代码时看到这样一种写法, 感觉是个挺容易踩到的坑, 搞清楚后写出来备忘. 短路逻辑 Python中进行逻辑运算的时候, 默认采用的是一种叫做短路逻辑的运算规则. 名字是很形象的, 下面直接 ...

  4. POJ-3041

    思路:将n个行看作n个点{x_i}(i=1, ..., n),n个列也看作n个点{y_j}(j=1, ..., n).每个障碍看作一条无向边(x_i, y_j).则该问题能够归结为求二分图最小点覆盖数 ...

  5. JdbcTemplate进行查询

    1.jdbcTemplate.queryForInt() 和 jdbcTemplate.queryForLong() 例如:下面使用queryForInt()方法传回user表中的记录数: jdbcT ...

  6. ftp文件上传下载实用命令

    连接 >ftp yourhost >user yourusername >password your password 顺利的话连接成功 >dir ;获取remote目录列表 ...

  7. ArcGIS Server的Tile的松散型存储（Exploded）

    protected override void GetTileSource(int level, int row, int col, Action<System.Windows.Media.Im ...

  8. GCD封装的个人理解和应用

    GCD封装的个人理解和应用 特点 >>将GCD封装,使我们从繁琐的方法记忆中解脱出来,能够直接快速的应用. 使用方法 1.将工程中的GCD文件中的9个文件拖入自己的工程中(你自己最好建一个 ...

  9. ios中@class和 #import区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢?这是因 ...

  10. iOS百度地图简单使用

    本文介绍三种接口: 1.基础地图2.POI检索3.定位 首先是配置环境,有两种方法,方法在官方教程里都有,不再多说 1.使用CocoaPods自动配置[这个方法特别好,因为当你使用CocoaPods配 ...