CSS字体大小设置及h1标签字体大小设置

一、单位

CSS中的字体大小可以使用多种单位，常用的有px、em、rem、%等。其中，px是最常用的单位之一，表示像素；em是相对单位，表示相对于其父元素的字体大小；rem也是相对单位，表示相对于根元素的字体大小；%则是相对于元素父元素的大小。

h1{
  font-size: 36px;
}
h2{
  font-size: 2.5em;
}
p{
  font-size: 1.2rem;
}
span{
  font-size: 80%;
}

二、不同屏幕尺寸的适配

移动设备中，不同的屏幕尺寸会影响字体的大小。为了保证在不同尺寸的屏幕上显示适配，可以使用CSS3中新增的单位vw，表示相对于视口宽度的百分比。此外，可以结合媒体查询@media实现不同屏幕尺寸的字体大小适配。

h1{
  font-size: 5vw;
}
@media (min-width:768px){
  h1{
    font-size: 36px;
  }
}

三、h1标签字体大小设置

h1标签是HTML中最常用的标题标签之一，根据SEO的要求，应该对h1标签进行特别的处理，如设置字体大小。使用CSS的方式可以为每个h1标签单独设置字体大小。

h1{
  font-size: 36px;
}

四、计算字体大小

通常情况下，我们设置的字体大小是根据视觉效果来决定的，但也可以根据具体的需求使用公式计算得出。例如，可以根据使用者的屏幕分辨率大小和 distance 指数计算出最适合的字体大小。

h1{
  font-size: calc(20px + 2vw);
}

五、使用JavaScript动态设置字体大小

除了使用CSS设置字体大小，也可以使用JavaScript实现动态设置字体大小。通过JavaScript获取到需要设置字体大小的元素，再通过设置元素的fontSize属性来改变字体大小。

var el = document.getElementById('elementId');
el.style.fontSize = '24px';