@常用字体对应表:

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;
}

6,新浪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;

摘自:https://www.cnblogs.com/zxrbky/p/9275338.html

转载于:https://www.cnblogs.com/MrZhujl/p/11534046.html

font-family 字体及各大主流网站对比相关推荐

  1. 各大主流网站使用的 font-family 字体

    小米米官网: font-family: "Arial","Microsoft YaHei","黑体","宋体",sans ...

  2. 各大主流网站css初始化代码

    代码是网上找到  顺便做个笔记,如有侵权请通知我删除 谢谢 首先是要做css初始化的原因: 不同浏览器对各个元素的margin,padding,border,font等属性的定义各有不同,不同浏览器的 ...

  3. 教你使用Python下载b站等各大主流网站音视频

    你是否曾幻想过有这样一个工具,可以一键下载youtube.b站.优酷.爱奇艺.腾讯.斗鱼.土豆.芒果TV-几乎所有网站的视频,以及网易云音乐.酷我音乐.酷狗音乐.虾米音乐等各大音乐平台的音乐,还有所有 ...

  4. 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站

    一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...

  5. Lazada和Shopee:瞄准6亿人口东南亚市场的两大主流电商平台

    目前,主流跨境电商平台主要都以速卖通和亚马逊平台为主,而美国平台频繁都在遭遇律所的讹诈.从侵权风险来看,美国平台和非美国平台是处于两种完全不同的境遇,很少有听到非美国平台遭遇被讹诈的(不排除以后也会遭 ...

  6. 10大主流压力测试工具推荐(转载)

    在移动应用和Web服务正式发布之前,除了进行必要的功能测试和安全测试,为了保证互联网产品的服务交付质量,往往还需要做压力/负载/性能测试.然而很多传统企业在试水互联网+的过程中,往往由于资源或产品迭代 ...

  7. 玩转WORD字体设置:WORD字间距怎么调整,WORD字体怎么调大等

    WORD作为最好的文字处理软件之一,在日常办公中,是不可或缺的.而作为文字处理软件,WORD关于字体的操作尤为重要.今天,奇点来临小编就和大家分享下WORD字体的一些技巧,如果您觉得有用,可以转发给朋 ...

  8. 性能追击:万字长文30+图揭秘8大主流服务器程序线程模型 | Node.js,Apache,Nginx,Netty,Redis,Tomcat,MySQL,Zuul

    本文为<高性能网络编程游记>的第六篇"性能追击:万字长文30+图揭秘8大主流服务器程序线程模型". 最近拍的照片比较少,不知道配什么图好,于是自己画了一个,凑合着用,让 ...

  9. 10大主流压力/负载/性能测试工具推荐

    在移动应用和Web服务正式发布之前,除了进行必要的功能测试和安全测试,为了保证互联网产品的服务交付质量,往往还需要做压力/负载/性能测试.然而很多传统企业在试水互联网+的过程中,往往由于资源或产品迭代 ...

  10. 10大主流压力测试工具推荐

    在移动应用和Web服务正式发布之前,除了进行必要的功能测试和安全测试,为了保证互联网产品的服务交付质量,往往还需要做压力/负载/性能测试.然而很多传统企业在试水互联网+的过程中,往往由于资源或产品迭代 ...

最新文章

  1. python3标准数据类型
  2. 学习SPI的一些疑惑
  3. python中List的sort方法(或者sorted内建函数)的用法
  4. Echarts地图添加自定义图标
  5. linux--GCC简单用法
  6. LeetCode 388. 文件的最长绝对路径(不用栈,前缀和)
  7. AngularJS1.5+ 笔记
  8. c++语言中如果调用函数时,需要改变实参或者返回多个值,应该采取,C++综合练习题2...
  9. ROS入门-5.认识ROS及ROS的基本概念
  10. 第一章数据分析与挖掘概述
  11. 夺命雷公狗---DEDECMS----23dedecms修改内容页面展示的信息
  12. 50. 熟悉与STL相关的Web站点
  13. 细说 MySQL登录
  14. This relative module was not found: Error: Can‘t resolve ‘../assets/bg.jpg‘
  15. Unity Gyro之使用陀螺仪实现简单VR全景环视效果
  16. MySQL 分组后取最新记录
  17. Python之Email邮箱账号抓取
  18. LOGO设计的五大基础原则
  19. Corrective feedback
  20. My Sixty-seventh Page - 0-1背包问题理论 - By Nicolas

热门文章

  1. 图解图库JanusGraph系列-janusgraph图数据库的本地源码编译教程(janusgraph source code compile)
  2. mysql两个库相互同步_实现两个Mysql数据库之间同步的方案
  3. 整理了一份嵌入式软件工具清单!
  4. fgo服务器中断020202,终章炸服事件 - Mooncell - 玩家自由构筑的FGO中文Wiki
  5. Java HTTP 代理服务器
  6. 太极发送卡片软件_xml卡片消息制作软件下载-qq xml卡片消息生成器最新版0.8.10.209 免费版-东坡下载...
  7. 软件设计与体系结构:设计过程
  8. 固建机器人钢结构智能生产线 改善钢结构行业品质
  9. 六级病历对门诊电子病历系统功能要求的初步梳理
  10. 占位智能家居市场,施耐德电气仅靠一个Wiser系统?