[分享]css中字体怎么做响应式

CSS中常用的字体属性包括fontfamily（字体系列）、fontsize（字号）、fontweight（字重）、fontstyle（字体样式）、lineheight（行高）等等。当我们在不同的设备...

CSS中常用的字体属性包括font-family（字体系列）、font-size（字号）、font-weight（字重）、font-style（字体样式）、line-height（行高）等等。当我们在不同的设备上访问同一个网页时，不同的屏幕尺寸和显示器分辨率可能会导致字体显示效果不一样。因此，要做好字体的响应式设计，以确保文字的可读性和美观度。

在实际应用中，我们通常使用相对单位来定义字体大小，如em、rem、vw、vh等。rem代表“根元素字体大小”，即相对于html元素的字体大小，而不是相对于父元素。这种方式不仅可以实现响应式设计，而且可以方便地调整全局字体大小。

body {
	font-size: 16px;
}

h1 {
	font-size: 2.5rem; /* 40px */
}

p {
	font-size: 1.2rem; /* 19.2px */
}

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}
	h1 {
		font-size: 2rem; /* 32px */
	}
	p {
		font-size: 1rem; /* 16px */
	}
} 

上面的代码中，我们首先给body元素设置了基础字体大小为16px，然后用rem单位来设置h1和p元素的字体大小。在移动端设备上，我们使用@media查询来调整字体大小，以适应 smaller 设备。

除了字体大小之外，还有一些字体属性需要注意。比如字体系列，可以定义多个备选字体，以备某些特定的字体在某些设备上不可用时的情况。例如：

body {
	font-family: 'Microsoft YaHei', sans-serif;
}

@media screen and (max-width: 768px) {
	body {
		font-family: Arial, sans-serif;
	}
} 

在上面的代码中，我们首选微软雅黑字体，如果设备上没有安装，则默认使用sans-serif字母。在移动端设备上，我们为了节省空间和带宽，使用了Arial字体。