您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古11选5走势图今天:font-family【CSS 字体】(宋体 黑体 微软雅黑)CSS文字字体

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

HTML网页内蒙古11选五开奖5号的布局中,都必须对网页设置字体样式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系统、苹果系统等)默认安装字体不多(大多系统默认相同字体更是少之又少,好在常见几个中文字体电脑系统都默认安装),造成我们在内蒙古11选五开奖5号的开发网页时候,字体不能乱设置,假如你安装很多字体,可能你CSS font-family设置字体在本机上能正确显示,但是在其他没有安装此字体电脑上不能正确显示该字体,而是现实其它系统默认字体,这样造成低级字体兼容问题,所以我们在内蒙古11选五开奖5号的布局时候能乱设置中文字体。

常见默认中文字体可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转换转化即可。网址://www.phlmy.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转换后字体。

更多字体转换速查//www.phlmy.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
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/871.shtml

日期:2016-05-20 13:30:25 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:css
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-04-16
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2019-04-16