Question

我在我正在制作的网站中使用了Google的新 Material Design。我对他们提供的typography规则有一些疑问。

要模拟typography-link中提供的值，我制作了一个css文件，以便轻松使用其给定的值。这个css文件看起来像这样：

.display4{
    font-size: 112px;
    font-weight: 300;
    opacity: 0.54;
    white-space: nowrap;
    letter-spacing: -0.089em;
}
.display3{
    font-size: 56px;
    font-weight: 400;
    opacity: 0.54;
    white-space: nowrap;
    letter-spacing: -0.089em;
}
.display2{
    font-size: 45px;
    font-weight: 400;
    opacity: 0.54;
    line-height: 1.06em;
    letter-spacing: 0em;
}
.display1{
    font-size: 34px;
    font-weight: 400;
    opacity: 0.54;
    line-height: 1.176em;
    letter-spacing: 0em;
}
h1{
    font-size: 24px;
    font-weight: 400;
    opacity: 0.87;
    line-height: 1.333em;
    letter-spacing: 0em;
}
h2{
    font-size: 20px;
    font-weight: 500;
    opacity: 0.87;
    white-space: nowrap;
    letter-spacing: 0em;
}
h3{
    font-size: 16px;
    font-weight: 400;
    opacity: 0.87;
    line-height: 1.75em;
    letter-spacing: 0em;
}
core-drawer-panel:not([narrow]) h3{
    font-size: 15px;
}
.body2{
    font-size: 14px;
    font-weight: 500;
    opacity: 0.87;
    line-height: 1.714em;
    letter-spacing: 0em;
}
.body2:not([narrow]){
    font-size: 13px;
}
p{
    font-size: 14px;
    font-weight: 400;
    opacity: 0.87;
    line-height: 1.174em;
    letter-spacing: 0em;
}
core-drawer-panel:not([narrow]) p{
    font-size: 13px;
}
h4{
    font-size: 12px;
    font-weight: 400;
    opacity: 0.54;
    white-space: nowrap;
    letter-spacing: 0em;
}
.menu{
    font-size: 14px;
    font-weight: 500;
    opacity: 0.87;
    white-space: nowrap;
    letter-spacing: 0em;
}
core-drawer-panel:not([narrow]) .menu{
    font-size: 13px;
}
.button{
    font-size: 14px;
    font-weight: 500;
    opacity: 0.87;
    white-space: nowrap;
    letter-spacing: 0em;
    text-transform: uppercase;
}

我还有一个问题是计算letter-spacing的大小（在最底部的跟踪和字距中提供），但我想这会在项目的另一个阶段澄清。

出现的问题如下 - 他们给出的值是Scalable Pixels，因此可以轻松缩放。不幸的是，我不确定如何做到这一点。目前我刚刚完成了对px的1-1翻译。我已将所有其他值转换为em（我相信它与字体大小相关）。

我希望我的网站有两个按钮，以增加/减少整体字体大小。我已经检查了一个我知道支持多种字体大小的网站，但它们只有单独的样式表，我希望能够避开这些样式表。

所以我的问题是：如何设置我的css文件以便轻松扩展，我应该如何使用javascript / css进行扩展？

Answer 1

考虑将rem单位用于字体大小，以便它们可以相对于根元素的字体大小（主要是<html>元素）轻松扩展。

如果您需要IE8支持，请提供像素值作为后备，如下所示：

html {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
  font-size: 24px;
}

然后，您需要做的就是通过JavaScript增加根元素的字体大小。

材料设计缩放字体

1 个答案: