网页设计中常用的web安全字体及CSS写法

2018/4/6 21:21:45admin0 阅读22 评论

<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
HTML,CSS,font-family:中文字体的英文名称
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<br/>
</p>

<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<br/>
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<br/>
</p>
<table class=“zyhovertable”>
<tbody>
<tr class=“firstRow”>
<th>
中文名
</th>
<th>
对照名
</th>
<th>
css写法
</th>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
宋体
</td>
<td>
SimSun
</td>
<td>
font-family:SimSun;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
黑体
</td>
<td>
SimHei
</td>
<td>
font-family:SimHei;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
微软雅黑
</td>
<td>
Microsoft YaHei
</td>
<td>
font-family:Microsoft YaHei;
</td>
</tr>
<tr>
<td>
微软正黑体
</td>
<td>
Microsoft JhengHei
</td>
<td>
font-family:Microsoft JhengHei;
</td>
</tr>
<tr>
<td>
新宋体
</td>
<td>
NSimSun
</td>
<td>
font-family:NSimSun;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
新细明体
</td>
<td>
PMingLiU
</td>
<td>
font-family:PMingLiU;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
细明体
</td>
<td>
MingLiU
</td>
<td>
font-family:MingLiU;
</td>
</tr>
<tr>
<td>
标楷体
</td>
<td>
DFKai-SB
</td>
<td>
font-family:DFKai-SB;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
仿宋
</td>
<td>
FangSong
</td>
<td>
font-family:FangSong;
</td>
</tr>
<tr>
<td>
楷体
</td>
<td>
KaiTi
</td>
<td>
font-family:KaiTi;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
仿宋_GB2312
</td>
<td>
FangSong_GB2312
</td>
<td>
font-family:FangSong_GB2312;
</td>
</tr>
<tr>
<td>
楷体_GB2312
</td>
<td>
KaiTi_GB2312
</td>
<td>
font-family:KaiTi_GB2312;
</td>
</tr>
</tbody>
</table>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
宋体:SimSuncss中中文字体(font-family)的英文名称
</p>
<br/>
<br/>
<br/>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<span><strong>Mac OS的一些:</strong></span>
</p>
<table class=“zyhovertable”>
<tbody>
<tr class=“firstRow”>
<th>
中文名
</th>
<th>
英文名
</th>
<th>
css写法
</th>
</tr>
<tr>
<td>
华文细黑
</td>
<td>
STHeiti Light [STXihei]
</td>
<td>
font-family:STHeiti Light;
</td>
</tr>
<tr>
<td>
华文黑体
</td>
<td>
STHeiti
</td>
<td>
font-family:STHeiti;
</td>
</tr>
<tr style=“background-color: rgb(247, 248, 245);”>
<td>
华文楷体
</td>
<td>
STKaiti
</td>
<td>
font-family:STKaiti;
</td>
</tr>
<tr>
<td>
华文宋体
</td>
<td>
STSong
</td>
<td>
font-family:STSong;
</td>
</tr>
<tr>
<td>
华文仿宋
</td>
<td>
STFangsong
</td>
<td>
font-family:STFangsong;
</td>
</tr>
<tr>
<td>
儷黑 Pro
</td>
<td>
LiHei Pro Medium
</td>
<td>
font-family:Pro LiHei Pro Medium;
</td>
</tr>
<tr>
<td>
儷宋 Pro
</td>
<td>
LiSong Pro Light
</td>
<td>
font-family: Pro LiSong Pro Light;
</td>
</tr>
<tr>
<td>
標楷體
</td>
<td>
BiauKai
</td>
<td>
font-family:BiauKai;
</td>
</tr>
<tr>
<td>
蘋果儷中黑
</td>
<td>
Apple LiGothic Medium
</td>
<td>
font-family:Apple LiGothic Medium;
</td>
</tr>
<tr>
<td>
蘋果儷細宋
</td>
<td>
Apple LiSung Light
</td>
<td>
font-family:Apple LiSung Light;
</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<span style=“font-size: 20px;”><strong>Windows的一些:</strong></span>
</p>
<p style=“font-family: "Microsoft YaHei"; white-space: normal;”>
<span style=“font-size: 20px;”><strong><br/></strong></span><span style=“font-size:16px”>新細明體:PMingLiU</span><br/><span style=“font-size:16px”>細明體:MingLiU</span><br/><span style=“font-size:16px”>標楷體:DFKai-SB</span><br/><span style=“font-size:16px”>黑体:SimHei</span><br/><span style=“font-size:16px”>新宋体:NSimSun</span><br/><span style=“font-size:16px”>仿宋:FangSong</span><br/><span style=“font-size:16px”>楷体:KaiTi</span><br/><span style=“font-size:16px”>仿宋_GB2312:FangSong_GB2312</span><br/><span style=“font-size:16px”>楷体_GB2312:KaiTi_GB2312</span><br/><span style=“font-size:16px”>微軟正黑體:Microsoft JhengHei</span><br/><span style=“font-size:16px”>微软雅黑体:Microsoft YaHei</span><br/><span style=“font-size:16px”>装Office会生出来的一些:</span><br/><span style=“font-size:16px”>隶书:LiSu</span><br/><span style=“font-size:16px”>幼圆:YouYuan</span><br/><span style=“font-size:16px”>华文细黑:STXihei</span><br/><span style=“font-size:16px”>华文楷体:STKaiti</span><br/><span style=“font-size:16px”>华文宋体:STSong</span><br/><span style=“font-size:16px”>华文中宋:STZhongsong</span><br/><span style=“font-size:16px”>华文仿宋:STFangsong</span><br/><span style=“font-size:16px”>方正舒体:FZShuTi</span><br/><span style=“font-size:16px”>方正姚体:FZYaoti</span><br/><span style=“font-size:16px”>华文彩云:STCaiyun</span><br/><span style=“font-size:16px”>华文琥珀:STHupo</span><br/><span style=“font-size:16px”>华文隶书:STLiti</span><br/><span style=“font-size:16px”>华文行楷:STXingkai</span><br/><span style=“font-size:16px”>华文新魏:STXinwei</span>
</p>
<br/>
<br/>
<br/>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
<span style=“color: rgb(0, 0, 255);”><strong>几个网站使用的好看的字体实例:</strong></span>
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
例1(小米米官网):font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,’宋体’,sans-serif;
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
例3(加网 ):font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;
</p>
<p style=“font-family: "Microsoft YaHei"; font-size: medium; white-space: normal;”>
例5(一淘UX):font-family: Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;
</p>
<p>
<br/>
</p>
</div>

评论区

  • superficial#13
    superficial2018/5/30 21:33:46

    收藏了,蛮有用的!!

    WindowsChrome

  • Cherry#12
    Cherry2018/5/26 12:14:55

    爱的那么认真,爱的那么认真,可还是听见了你…说不可能

    WindowsChrome

  • Cherry#11
    Cherry2018/5/19 18:17:58

    小陌搞神魔恋????催更催更,你搞这个东西 [penxue]

    WindowsChrome

    • Leaf autumn#1
      Leaf autumn2018/5/20 23:48:12
      @Cherry

      在下呆头鹅小陌,你搞这些个东西,别催更,不更不更我不更 [xieyanxiao]

      WindowsFirefox

  • 我爱辅助论坛#10
    我爱辅助论坛2018/5/8 15:33:11

    坚持更新,做好自己

    WindowsChrome

  • 山野愚人居#9
    山野愚人居2018/5/6 01:28:48

    这个不错,收藏了,我总感觉我的网站字体不好看!

    AndroidChrome

  • ZAERA#8
    ZAERA2018/5/1 13:23:23

    字体很重要啊,收藏

    WindowsChrome

    • xiaomo#1
      xiaomo2018/5/2 12:57:41
      @ZAERA

      好看的字体视觉会舒服点 [xieyanxiao]

      WindowsFirefox

  • 残影#7
    残影2018/5/1 10:53:44

    大概懂了

    WindowsChrome

  • 晴和君#6
    晴和君2018/4/29 14:00:24

    值得收藏的内容。。。不然每次都配不好字体。。

    macOSSafari

  • 九四#5
    九四2018/4/29 12:35:08

    中文字体引用还是个难题

    WindowsChrome

    • xiaomo#1
      xiaomo2018/4/29 13:16:51
      @九四

      [xiaoku] 也许某天就不是难题了

      WindowsFirefox

  • Cherry#4
    Cherry2018/4/28 21:32:39

    给大肥开一手网易云会员? [huaixiao]

    WindowsChrome

    • xiaomo#1
      xiaomo2018/4/29 13:16:20
      @Cherry

      淘宝上搜索 [xieyanxiao]

      WindowsFirefox