css怎么设置漂亮的中文字体样式

html-css026

css怎么设置漂亮的中文字体样式,第1张

CSS即使设置了其他字体,也要看别的电脑里有没有,一般系统自带有宋体,黑体等字体,但是如果你电脑上有好看的字体,可以显示,在别的电脑没有你的字体,就显示不了,所以一般只会设置系统自带的字体。

设置方法:

<html>

<head>

<style type="text/css">

p.ziti{font-family:"Times New Roman",Georgia,Serif}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="ziti">要更改的字体内容</p>

</body>

</html>

CSS定义可以是:font-family:sans-serif

也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}

为什么我这里设置了三个,分别用","隔开呢,因为不同版本的操作系统,对字体的支持不同解释如下:

例如微软雅黑不同操作系统不同版本需要如下设置:

Windows XP及以前版本的Windows

font-family: Arial, 宋体, sans-serif

Windows Vista和Windows 7

font-family: 'Microsoft Yahei', sans-serif

Sorry,英文就无法设置字体了,因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。

Mac及其它操作系统

font-family: sans-serif

系统自带中文字体编码:

宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB2312FangSong_GB2312楷体_GB2312KaiTi_GB2312

<style type="text/css">

.aa{ width:200pxheight:44pxborder:0background-image:url(img1.png)}

.aa:active{ background-image:url(img2.png)}

</style>

<input type="button" class="aa" value=""/>

IE6需要另外插一张类库

以下为font-family常用合集以及一部分文字效果:

windows常见内置中文字体

宋体 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

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