HTML-CSS（十）文字样式使用

最新推荐文章于 2024-03-08 23:06:13 发布

LJbab

最新推荐文章于 2024-03-08 23:06:13 发布

阅读量2.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44730244/article/details/115854195

版权

CSS 专栏收录该内容

65 篇文章

订阅专栏

font-family:字体类型

写法：font-family:宋体

英文字体：Arial,‘Times New Roman’… （只针对英文）
中文字体:微软雅黑，宋体… （中英文都影响）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				font-family: "blackadder itc"
			}
			#div2{
				font-family: '方正舒体','Times New Roman', simsun, 微软雅黑;
			}
		</style>
	</head>
	<body>
		<div id="div1" >
			中文
			English
		</div>
		<div id="div2" >
			中文
			English
		</div>
	</body>

在这里插入图片描述
衬线体与非衬线体（了解即可）：非衬线体更加圆滑，衬线体有点摸棱两可的感觉。这个我也是自己看视频知道的，知道有这种东西存在就好。
设置文字字体类型需要注意的
1.设置多字体的方式
font-family: ‘Times New Roman’, simsun, 微软雅黑;（从左到右，如果刚好这个字体在电脑中存在，那么就以这个字体为主，不再往后查找了，如果设置的字体没有一个是电脑里自带的，那么就以默认字体为主）可以通过控制面板->字体，查看电脑自带的字体
2.引号问题
只有当字体类型属性值中，带有空格，才会使用引号（例如：font-family:‘Times New Roman’）,否则会报错

font-size:字体大小

默认：16px
写法：number（px）|单词（small large …不推荐使用，设置成具体的数值，更好调试）
单词可选用在下表：
在这里插入图片描述
注意：字体大小一般为偶数，方便文字对齐，font-size/2刚好得到一个整数

font-weight:字体粗细

模式：正常、加粗
写法：font-weight:number(100-900) | bold(+粗) | bolder（++粗）
number：(100-300)粗细都算正，（400-500）略粗，（600-900）一般粗。在我划分的三个范围中中，重要在范围内的他们几乎长得都一样，不同等级的差距其实也不大。使用我们想要字体变粗比较明显
100-300
在这里插入图片描述
400-500

600-900

bold-bolder

font-style:字体样式

模式:正常、斜体
写法:font-style:normal | italic (斜体) | oblique (也是斜体，用的比较少)
italic与oblique的区别：italic:所有带有倾斜字体属性的可以设置倾斜操作（大部分带，大家可以百度搜搜）；oblique:没有倾斜字体属性的字体也可以设置倾斜操作