您的位置:首页 > DIV CSS基础 > 正文

font-family【CSS 字体】(宋体 黑头 微软雅黑)CSS文字字体

CSS font-family字体(宋体 黑头 微软雅黑)CSS文字字体属性教程

HTML网页DIV+CSS布局中,都必须对网页设置字体样式font-family,如果不设置将会造成不同浏览器因浏览器品牌版本不同默认显示不同文字字体,造成文字字体不统一的低级兼容问题(扩展了解CSS字体大小)。

一、CSS字体属性单词

对文字设置CSS字体样式使用CSS属性单词:
font-family

二、font-family语法

font-family:值

如:
font-family:”黑体”;
font-family:”宋体”;
font-family:”微软雅黑”;
font-family:”新宋体”;
以上是系统默认有的字体。

font-family语法小例子:

p{ font-family:"微软雅黑";} 

设置网页中所以p标签内文字font-family字体为微软雅黑字体。

三、font-family中文字体选择与转换

网页布局中英文字体选择,根据默认大家电脑系统都有的可设置为网页布局使用font-family字体值,其它太偏的用户电脑没有字体不要设置,避免你自己电脑装的字体自己浏览此网页没问题,其它用户没有装这样字体造成font-family字体失效。

1、font-family中文字体选择

重点ThinkCSS介绍下font-family中文字体选择与设置技巧。

由于不同电脑系统(WIN系统、苹果系统等)默认安装字体不多(大多系统默认相同字体更是少之又少,好在常见几个中文字体电脑系统都默认安装),造成我们在DIV CSS开发网页时候,字体不能乱设置,假如你安装很多字体,可能你CSS font-family设置字体在本机上能正确显示,但是在其他没有安装此字体电脑上不能正确显示该字体,而是现实其它系统默认字体,这样造成低级字体兼容问题,所以我们在CSS布局时候能乱设置中文字体。

常见默认中文字体可font-family设置有哪些?
黑体、宋体、微软雅黑、新宋体
常见就此4个字体其中新宋体用的也比较少。

所以推荐大家在DIV CSS布局也好在网页美工设计也好要做HTML用文字表达的使用以上几个字体来设计即可,避免字体兼容或美工设计与HTML后字体不同。

2、中文字体转换
黑体——font-family:”黑体”
宋体——font-family:”宋体”
微软雅黑——font-family:”微软雅黑”
这样使用这几个字体没问题,但是直接使用中文字作为font-family字体样式,在大多品牌和版本浏览器中能显示正常,但是在微软IE9浏览器(IE9以上没有测试过)中如果font-family是用中文字来设置这些字体会造成line-height失效,那解决方法?

将中文字体的中文字用英文名或转换为Unicode。

1)、中文字用英文替代,比如:
黑体 英文 SimHei
font-family:”黑体” 与font-family:”SimHei”是一样的 都是设置为黑体。

宋体 英文 SimHei
font-family:”宋体” 与font-family:”SimSun”是一样的 都是设置为黑体。

微软雅黑 英文 Microsoft YaHei
font-family:”微软雅黑” 与font-family:”Microsoft YaHei”是一样的 都是设置为黑体。

2)、中文字转换Unicode,比如:
黑体 Unicode转换 \9ED1\4F53
font-family:”黑体” 与font-family:”\9ED1\4F53”是一样的 都是设置为黑体。

宋体 Unicode转换 \5B8B\4F53
font-family:”宋体” 与font-family:”\5B8B\4F53”是一样的 都是设置为黑体。

微软雅黑 Unicode转换 \5FAE\8F6F\96C5\9ED1
font-family:”微软雅黑” 与font-family:”\5FAE\8F6F\96C5\9ED1”是一样的 都是设置为黑体。

经验:如果需要使用英文、或Unicode类型字体我们不需要记住这些字体英文拼写,我们只需要进入thinkcss字体转换专题页查找对应中文字体Unicode转换转化即可。网址:https://www.thinkcss.com/jiqiao/325.shtml

四、font-family实例

ThinkCSS为大家实践font-family宋体、黑体、微软雅黑,掌握font-family用法。

这里对div、p、span分别设置这三种font-family字体样式。在使用这三个中文字体时会转换为Unicode格式以便兼容各大浏览器。

1、字体对应转换
黑体 Unicode转换 \9ED1\4F53
宋体 Unicode转换 \5B8B\4F53
微软雅黑 Unicode转换 \5FAE\8F6F\96C5\9ED1

当然还可以使用英文,但这里使用Unicode转换后字体。

更多字体转换速查https://www.thinkcss.com/jiqiao/325.shtml

2、实例CSS+HTML代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font-family实例 ThinkCSS</title>
<style>
div{ font-family:"\9ED1\4F53"}/* 设置div内文字为黑体 */
p{ font-family:"\5B8B\4F53"}/* 设置p内文字为宋体 */
span{ font-family:"\5FAE\8F6F\96C5\9ED1"}/* 设置span内文字为微软雅黑 */
</style>
</head>
<body>
<div>仔细观察 我是黑体字</div>
<p>仔细观察 我是宋体字</p>
<span>仔细观察 我是微软雅黑字</span>
</body>
</html>

便于观察将CSS代码使用style标签放入html内。

3、实例截图

font-family字体实例在浏览器截图
font-family字体实例在浏览器截图

4、在线演示与下载

在线演示:

查看案例

打包下载:

五、font-family总结

font-family用于设置文字字体属性单词,使用时候注意中文字体转换,以及哪些中文字体可用,切记勿乱用字体避免HTML字体兼容问题。

相关标签: 字体 font family
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/css/871.shtml

日期:2016-05-20 13:30 www.thinkcss.com css