css设置各种中文字体如雅黑、黑体、宋体、楷体等等_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

1、首先要了解css中是如何控制字体的。font:在一个声明中设置所有字体属性;font有以下几个属性:font-style:字体样式font-variant:字体异体font-weight:字体粗细font-size/line-height:字体大小/行高font-family:字体系列(比如宋体、黑体等)2、知道这些之后,那"设定字体为微软雅黑 Bold字体"就可以这么写:font-family:"微软雅黑;font-weight:bold;但是需要注意一点,通常我们使用中文字体的时候,都会使用的英文名称,而不是直接使用中文;而且,也会使用简写的形式;如下:font:bold 12px/1.5em"Microsoft YaHei;www.zgxue.com防采集请勿采集本网。

复制代码代码如下:

{font-family:\"微软雅黑;}或者{font-family:\"Microsoft Yahei使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。unicode编码的微软雅黑表示如下: {font-family:\"\\5FAE\\8F6F\\96C5\\9ED1\"}

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }

{font-family:\"微软雅黑;}或者{font-family:\"Microsoft Yahei;} 如果在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误, 为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些

说明:

加上中文名“微软雅黑”是为了兼容opera。

微软雅黑是可以变细的 font-weight:lighter(细) font-weight:normal(常规) font-weight:bold(粗)

MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。

为了兼容增加字体的兼容性,同时防止用户电脑未安装微软雅黑字体,设置的时候可以用如下代码: div{ font-family:\"Microsoft YaHei\",微软雅黑,\"MicrosoftJhengHei\",华文细黑,STHeiti,MingLiu } 说明:

在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:

“微软雅黑”的基线位置比其他中文字体要高一些,导致字体会往下偏移,但这不一定是bug,可能是微软想让中英混排的时候显得更美观吧。你可以自己在“测试”两个字的后面加一些字母和数字去试试看。

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

宋体:SimSun

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

注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效!

尝试着用办双引号去掉或者把字体设置成font-family:'Microsoft YaHei';页面出现的问题就解决了,font-family:'雅黑';此种写法IE6.0不兼容。1、font-family属性可以为标签设置字体,浏览器会从左至右依次查找是否有该字体,并将找到的第一个字体用于显示。如果没找到,则使用默认字体(Windows XP简体中文版一般是宋体)。2、但还有个未定义行为,若找到的第一个是英文字体,而要显示汉字时,应该如何处理。Chrome和Firefox是继续往后查,直到找到能正确显示的字体;而IE(我只测试了IE6)则直接改用默认字体显示汉字了。3、目前我只能用CSS hack的方法来判断(即只有IE能识别*开头的属性),但也只是提前了中文字体,英文字体就无效了:body { font-family:Verdana,微软雅黑;font-family:微软雅黑,Verdana;}4、此外,有时候找到的字体无法显示特殊符号,IE就用方框来显示了,非常无语。例如音乐符号:?如果你装了微软雅黑字体,那么在IE下看到的会是个方框,但Chrome和Firefox下正常。5、font:在一个声明中设置所有字体属性;font有以下几个属性:font-style:字体样式font-variant:字体异体font-weight:字体粗细font-size/line-height:字体大小/行高font-family:字体系列(比如宋体、黑体等)6、设定字体为微软雅黑 Bold字体"就可以写为:font-family:"微软雅黑;font-weight:bold;内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决type=file 文件修改表单 名称不能正常回显的问题
  • 移动端前端适配方案(总结)
  • css 横向进度条和竖向进度条实现代码
  • css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
  • 详解盒模型大小取决于它的padding,margin,border数值
  • css+svg实现b站充电效果的示例代码
  • css动画实现领积分效果的思路详解
  • html/css中的空格处理及如何保留页面中的空格
  • css 实现小尖角聊天对话框带尖角的说话泡泡效果
  • css实现气泡的小尖角效果
  • css里微软雅黑字体怎么设置
  • CSS中设定字体如何设定为微软雅黑 Bold字体?
  • CSS中设定字体为微软雅黑 Bold字体,如何设定?
  • 在360浏览器中CSS如何设置中文使用微软雅黑,英文使用其他字体
  • css样式怎么设置字体为微软雅黑
  • 手机web字体css怎么设置微软雅黑?
  • css怎么设置细的字体;比如微软雅黑有粗,常规,细三种嘛,怎么设定细呢
  • 在css里有让微软雅黑字体变圆滑的方法吗?
  • CSS 为什么 '微软雅黑'字体上下间距会靠下呢
  • 强制字体全部为微软雅黑,自定义CSS样式应该怎么写
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css移动端前端适配方案(总结)css运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)css动画实现领积分效果的思路详解css实现气泡的小尖角效果css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果css 实现小尖角聊天对话框带尖角的说话泡泡效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved