CSS字体设置

最新推荐文章于 2024-08-14 10:42:14 发布

HZS_Song

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量523

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41696334/article/details/104246287

版权

在css中，有两种不同类型的字体系列名称
1. 通用字体系列 - 拥有相似外观的字体系统组合（比如“Serif”或“Monospace”）
2. 特定字体系列 - 具体的字体系列（比如“Times”或“Courier”）
除了各种特定的字体系列外，css定义了5种通用字体系列：
1. Serif 字体
2. Sans-serif 字体
3. Monospace 字体
4. Cursive 字体
5. Fantasy 字体

body {
	font-family: sans-serif;
}

h1 {
	font-family: Georgia;
}

h1 {
	font-family: Georgia, serif;
}

p {
	font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;
}

object.style.fontFamily="arial,sans-serif"

值	描述
family-name generic-family	用于某个元素的字体族名称或由类族名称组成的优先表默认值：取决于浏览器
`inherit`	规定应该从父元素继承字体系列

object.style.fontStyle="italic"

font-variant属性设置小型大写字母的字体，这意味着所有的小写字母均会被转换为大写，但是所有使用所有小型大写字体的字母与其余文本相比，其字体尺寸更小。
JavaScript语法👇

object.style.fontVariant="small-caps"

值	描述
`normal`	默认值。浏览器会显示一个标桩的字体
`small-caps`	浏览器会显示小型大写字母的字体
`inherit`	规定应该从父元素继承font-variant属性的值

	object.style.fontWeight="900"

值	描述
`normal`	默认值。定义标准的字符
`bold`	定义粗体字符
`bolder`	定义更粗的字符
`lighter`	定义更细的字符
`100` `200` `300` `400` `500` `600` `700` `800` `900`	100-900为字体定义了9级加粗度。 `100`对应最细的字体变形 `900`对应最粗的字体变形 `400`等价于`normal` `700`等价于`bold`
`inherit`	规定应该从父元素继承字体的粗细

如果没有规定字体大小，普通文本的默认大小是16像素（16px=1em）。

h1 {
	font-size:60px;
}

h2 {
	font-size:40px;
}

p {
	font-size:14px;
}

h1 {
	font-size:3.75em;/* 60px/16=3.75em */
} 

h2 {
	font-size:2.5em;/* 40px/16=2.5em */
}  

p {
	font-size:0.875em;/* 14px/16=0.875em */
}

body {
	font-size:100%;
}

h1 {
	font-size:3.75em;
}

h2 {
	font-size:2.5em;
}

p {
	font-size:0.875em;
}

object.style.fontSize="larger"

值	描述
`xx-small` `x-small` `small` `medium` `large` `x-large` `xx-large`	设置字体的不同尺寸默认值：`medium`
`smaller`	把`font-size`设置为比父元素更小的尺寸
`larger`	把`font-size`设置为比父元素更大的尺寸
length	把`font-size`设置为一个固定的值
%	把`font-size`设置为基于父元素的一个百分比值
`inherit`	规定应该从父元素继承字体尺寸