我正在使用 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 的大小(在最底部的部分 Tracking and Kerning 中提供)，但我我猜这将在元素的进一步阶段得到澄清。
出现的问题如下——它们给出的值是Scalable Pixels，这样它们就可以很容易地缩放。不幸的是，我不确定该怎么做。目前我刚刚完成了 sp 到 px 的 1-1 翻译。我已经将 所有 其他值转换为 em(我开始相信这与字体大小有关)。
我希望我的网站有两个按钮，用于增大/减小整体字体大小。我查过一个我知道支持多种字体大小的网站，但它们只有单独的样式表，这是我希望规避的。
所以我的问题是:我应该如何设置我的 css 文件以便于扩展以及我应该如何使用 javascript/css 扩展它？
最佳答案
考虑使用 rem字体大小的单位，以便它们可以相对于根元素(主要是 <html> 元素)的字体大小轻松缩放。
如果你想要 IE8 支持，像这样提供一个像素值作为后备:
html {
font-size: 16px;
}
h1 {
font-size: 1.5rem;
font-size: 24px;
}
然后您所要做的就是通过 JavaScript 增加根元素的字体大小。
关于javascript - Material Design 缩放字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24932020/