css做网页字体自适应

CSS可以帮助我们实现网页字体的自适应，让网页在不同设备上展示更美观、舒适的视觉效果。

下面是一些实现网页字体自适应的CSS代码：

/*基于视口宽度的字体大小*/
body{
  font-size: calc(14px + 0.5vw);
}

/*基于父元素宽度的字体大小*/
h1{
  font-size: 3em;
}

/*断点换行*/
p{
  word-break: break-all;
}

第一段代码实现了基于视口宽度的字体大小，使用calc函数给定了一个基础字体大小14px，同时根据视口的宽度来做一个增量，在设备宽度变大时字体大小也会相应增大。

第二段代码实现了基于父元素宽度的字体大小，使用em作为单位，字体大小随着父元素宽度的变化而变化。比如在一个960px的容器中，h1的字体大小为3em，则h1的实际字体大小为2880px。这种技巧在响应式设计中非常有用。

最后一段代码用来实现断点换行，防止文本在较窄的设备上溢出屏幕，影响美观和阅读体验。

通过以上CSS技巧，可以实现网页字体在不同设备上的自适应，使得页面展示更加舒适、美观，提供更好的用户体验。