zoukankan      html  css  js  c++  java
  • css font-family字体及各大主流网站对比

    @常用字体对应表:

    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,5b8b4f53,sans-serif;

    例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,"5b8b4f53",sans-serif;

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

    font: 12px/1 Tahoma,Helvetica,Arial,"5b8b4f53",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;

    7,下图中,上图是xyz初始化字体代码用于黄淮农产品网的显示效果,下边是黄淮农产品网(hhncpw.com)的字体代码和显示效果。

  • 相关阅读:
    SVN日常使用
    zabbix安装
    shell日常脚本(centos6)
    mysql故障记录
    PHP商品秒杀功能实现思路分析
    Redis
    PHP 实现实时通信一般有两种方式
    FTP DNS SMTP POP3 HTTP HTTPS DHCP DNS SNMP Telnet 端口号
    TCP/UDP/HTTP的区别和联系
    TCP 和 UDP 的区别
  • 原文地址:https://www.cnblogs.com/yadi001/p/12923680.html
Copyright © 2011-2022 走看看