CSS样式（二）

最新推荐文章于 2022-06-13 14:04:23 发布

_wjl_

最新推荐文章于 2022-06-13 14:04:23 发布

阅读量166

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/abc_123_linbin/article/details/90316444

版权

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
normal： 正常的字体。相当于数字值400 
bold： 粗体。相当于数字值700。 
bolder： 定义比继承值更重的值 
lighter： 定义比继承值更轻的值 
<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-style:字体风格

normal： 指定文本字体样式为正常的字体 
italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique 
oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式字号和字体</title>
	<style type="text/css">
        h3{
        	font-size: 30px;
        	color: #ddd;
        	font-family: "宋体" ,"Microsoft YaHei",tohoma,arial; 
        }
        h4{
        	/* font-size: 14px; */
        	font:italic bold 14px "微软雅黑";  /*1.顺序不能改 2.必须保留size和family 属性*/
        	color: red;
        }

        p{
        	font-size: 14px;   /*CSS 注释  快捷键 Ctrl+shift + / */ 
        }

        span{
        	font-weight: 700;  /*字体加粗的效果  一般使用数字 */
        	font-style: oblique; /* 字体倾斜 */
        }

        strong{
        	font-weight: normal; /*不加粗*/
        }
        em{
        	font-style: normal;  /* 让斜体正常 */
        	color: red;
        }

	</style>
</head>
<body>

	<h3>阿里巴巴集团简介</h3>
	<p>2019年5月6日 10:28:03 来源：百度</p>
	<hr/>
	<h4>企业由来</h4>
	<p><span>阿里巴巴网络技术有限公司</span>（简称：<strong>阿里巴巴集团</strong>）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立的公司</p>

	

	<p><em>阿里巴巴集团</em>经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。</p>
	<p>2014年9月19日，阿里巴巴集团在纽约证券交易所正式挂牌上市，股票代码“BABA”，创始人和董事局主席为马云。</p>
	<p>2018年7月19日，全球同步《财富》世界500强排行榜发布，阿里巴巴集团排名300位。 [4]  2018年12月，阿里巴巴入围2018世界品牌500强。</p>
</body>
</html>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式（二）

CSS Unicode字体在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文...
复制链接

扫一扫