常用字体对应表:

HTML,CSS,font-family:中文字体的英文名称

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体:SimSuncss中中文字体(font-family)的英文名称

Mac OS的一些:

华文细黑:STHeiti Light [STXihei]

华文黑体:STHeiti

华文楷体:STKaiti

华文宋体:STSong

华文仿宋:STFangsong

儷黑 Pro:LiHei Pro Medium

儷宋 Pro:LiSong Pro Light

標楷體:BiauKai

蘋果儷中黑:Apple LiGothic Medium

蘋果儷細宋:Apple LiSung Light

Windows的一些:

新細明體:PMingLiU

細明體:MingLiU

標楷體:DFKai-SB

黑体:SimHei

新宋体:NSimSun

仿宋:FangSong

楷体:KaiTi

仿宋_GB2312:FangSong_GB2312

楷体_GB2312:KaiTi_GB2312

微軟正黑體:Microsoft JhengHei

微软雅黑体:Microsoft YaHei

装Office会生出来的一些:

隶书:LiSu

幼圆:YouYuan

华文细黑:STXihei

华文楷体:STKaiti

华文宋体:STSong

华文中宋:STZhongsong

华文仿宋:STFangsong

方正舒体:FZShuTi

方正姚体:FZYaoti

华文彩云:STCaiyun

华文琥珀:STHupo

华文隶书:STLiti

华文行楷:STXingkai

华文新魏:STXinwei

@网站应用:

  1. 京东body和字体初始化代码(借鉴):
    a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
    }
    body {
    background: #fff none repeat scroll 0 0;
    color: #666;
    font: 12px/150% Arial,Verdana,“宋体”;
    }

  2. 黄淮字体初始化代码(反面教材):
    body {

    color: #666;
    font-family: “宋体”,“SimSun”;
    font-size: 12px;
    line-height: 1.5;
    }
    —宋体在显示英文时很丑,例如小写的g

  3. 物通网字体初始化代码:
    body {
    background: #fff none repeat scroll 0 0;
    color: #333333;
    font-family: Tahoma,Arial,“宋体”;
    font-size: 12px;
    line-height: 22px;
    margin: 0;
    padding: 0 0 12px;
    }

  4. 新一站body和字体初始化代码(借鉴):
    body, html {
    font-family: Tahoma,Arial,“Hiragino Sans GB”,simsun,sans-serif;
    font-size: 12px;
    height: 100%;
    line-height: 1.6;
    }
    a, abbr, acronym, address, article, aside, audio, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, iframe, img, ins, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, section, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
    border: 0 none;
    margin: 0;
    padding: 0;
    }

  5. 淘宝body和字体初始化代码(借鉴):
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    }
    body, button, input, select, textarea {
    font: 12px/1.5 tahoma,arial,“Hiragino Sans GB”,宋体,sans-serif;
    }

  6. 锤子科技body和字体初始化代码(借鉴):
    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    }
    body {
    color: #666;
    font-family: Helvetica,Arial,“Hiragino Sans GB”,“Microsoft Yahei”,“微软雅黑”,STHeiti,“华文细黑”,sans-serif;
    font-size: 14px;
    }

  7. 新浪body和字体初始化代码(借鉴):
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
    }
    body {
    background: #fff none repeat scroll 0 0;
    color: #333;
    font: 12px/20px “SimSun”,“宋体”,“Arial Narrow”,HELVETICA;
    padding: 5px 0;
    }
    .main-nav {
    font-family: “Microsoft YaHei”,“微软雅黑”,“SimSun”,“宋体”;
    }
    body, td, th {
    font-family: 宋体;
    }
    —整站大部分用的是宋体16x/26x

@CSS设置字体方法

  1. CSS如何控制字间距?

在需要设置的CSS标签下加入一下代码即可。 word-spacing:8px; letter-spacing: 1px; 具体是哪个自己配置测试下。

@CSS,font-family,好看常用的中文字体

转载自http://www.zreading.cn/ican/2014/10/css-font-family/

例1(小米米官网):font-family: “Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif;

例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,‘宋体’,sans-serif;

例3(加网 ):font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;

例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,“\5b8b\4f53”,sans-serif;

例5(一淘UX):font-family: Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;

font: 12px/1 Tahoma,Helvetica,Arial,“\5b8b\4f53”,sans-serif;

—总结百家所长:font: 12px/150% Tahoma,Helvetica,Arial,Verdana,“Microsoft YaHei”,“SimSun”,“宋体”;

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”。

@总结:

  1. Arial出镜率最高,一般在第二位,Arial 确实是前 ClearType 时代 Windows 里最好的几个
    正文字体之一(还有 Verdana 和 Tahoma 等)。
  2. 其次是Tahoma,3个大网站把它放在第一位。
  3. 宋体,“SimSun”—微软宋体,一般放在最后两位。
  4. 总结,使用原则------Tahoma,Arial,Verdana可以放在前边,宋体放在最后。其他可以尝试用下微软雅黑等字体。

字体名称最好写成英文,否则编码问题有些地区可能看到的是乱码
1.simsun=宋体

2.在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif(偏粗,厚)和Serif(偏细)
—Verdana等则属于Sans Serif字体。对中文而言,同样存在这两大种类,很明显,
宋体、细明体(繁体中常用)等就属于Serif,而黑体、幼圆等则属于Sans Serif。

3.Microsoft Yahei微软雅黑

4.tahoma字体,Tahoma和Verdana师出同门,同为名设计师马修·卡特的作品。
—xyz首选字体

5.Arial,xyz次选字体

6.不会设计,仿好的网站,例如新一站的字体初始化代码:font-family: Tahoma,Arial,“Hiragino Sans GB”,“simsun”,sans-serif;

最常用的CSS字体库相关推荐

  1. html 中加入字体库,css字体库怎么用?

    CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件. css字体库使用方法: 1.下载字体库文件 自 ...

  2. 前端常用的CSS工具库

    1. animista,在线查看自己需要的动画效果,比较常用,直接复制代码即可. 官网: Animista - CSS Animations on Demand 2.Animate.css是一个现成的 ...

  3. 最详细的CSS字体样式总结(font-family、font-size、font-weight、font-style等)

    文章目录 前言 一.字体系列 二.字体大小 三.字体粗细 四.字体样式 五.字体复合属性写法 总结 前言 由于自己在学习CSS的过程中会时不时忘记一些CSS字体样式的书写,因此在本文记录了一些常用的C ...

  4. CSS在线字体库,外部字体的引用方法@font-face

    [新增]使用自己下载的字体的示例: 参考    http://www.w3cplus.com/content/css3-font-face  @font-face{ font-family: &quo ...

  5. Font Awesome一套绝佳的图标字体库和CSS框架的使用

    场景 Font Awesome 一套绝佳的图标字体库和CSS框架 官网: http://fontawesome.dashgame.com/ 实现 从官网下载资源文件,解压后的目录 将上面解压后的四个目 ...

  6. html css导航栏字体图标,HTML+CSS入门之两种图标字体库

    本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言 比较基础的图标加载:和块元素的背景background ...

  7. HTML5常用的文本标签及css字体样式属性

    HTML5常用的文本标签 标签 描述 标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1.H2.H3.H4.H5.H6 <p> 用于定义HTML中的段落 <br> ...

  8. css好看常用的中文字体

    CSS,font-family,好看常用的中文字体 2014-10-14 例1(小米米官网):font-family: "Arial","Microsoft YaHei& ...

  9. css常用的中文字体

    CSS,font-family,好看常用的中文字体 例1(小米米官网):font-family: "Arial","Microsoft YaHei"," ...

  10. FontAwesome图标字体库和CSS框架

    1.CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架,为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. ...

最新文章

  1. php utf8 或gbk 截取字符串乱码解决
  2. 2017年10月18日普及组 文件名排序
  3. 上传jar包到Apache Archiva本地仓库
  4. create document history via code
  5. dede 5.7 任意用户重置密码前台
  6. MFC中单选按钮的特点总结
  7. 洛谷P2014【树形dp】
  8. MapReduce二次排序
  9. 正弦光栅的生成matlab,matlab做正弦光栅衍射的计算机模拟
  10. sap采购申请自动转采购订单_SAP财务常用的MM模块事务代码清单
  11. 2017和2019对比图刷屏,真实扎心!苹果中国女老板也跟风晒图...
  12. coreboot学习5:启动流程跟踪之ramstage阶段主干分析
  13. java 跨平台很鸡肋,Mac 篇八:Mac上的这个软件看起来很鸡肋,其实很牛很强大
  14. 计算机组成原理-第3章-3.3
  15. 【2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest (ECPC 16) A】The game of Osho【SG函数+找规律】
  16. 下载 针式PKM V9.08 版
  17. 谷歌浏览器发送POST请求(测试Post接口)
  18. 内存颗粒位宽和容量_DDR4内存终极解析(一)--DDR4内存颗粒
  19. 注意力(Attention)
  20. amaze ui 中多选框select的问题

热门文章

  1. keli 软件支持包下载
  2. 《SQL注入攻击与防御》读书笔记
  3. matlab2014中GUI之菜单栏设计
  4. 【技术】Java打印菱形
  5. 在java中调用python程序
  6. nest.js实战之集成Linkedin登录
  7. Python笔试面试题
  8. linux点亮桌面,教你如何点亮自己的Ubuntu 屏幕
  9. 数据结构严蔚敏(c语言版)课后算法题答案-线性表
  10. Scikit-Learn 与 TensorFlow 机器学习实用指南学习笔记 3 —— 数据获取与清洗