材料设计缩放字体
我正在一个我正在制作的网站上使用谷歌的新Material Design。关于他们提供的排版规则，我有一些疑问。
为了模拟印刷术.链接中提供的值，我创建了一个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大小的计算(在最底层的部分跟踪和Kerning中提供)，但我想这一点将在项目的进一步阶段得到澄清。
出现的问题如下--它们给出的值是Scalable Pixels，这样就可以很容易地缩放它们。不幸的是我不太确定该怎么做。目前，我刚刚完成了sp到px的1-1转换。我已经将所有其他值转换为em (我逐渐相信这是相对于字体大小的)。
我希望我的网站有两个按钮，以增加/减少整体字体大小。我查看了一个我知道的支持多种字体大小的网站，但它们只是有单独的样式表，这是我希望避免的。
因此，我的问题是:我应该如何设置我的css文件以便于扩展，以及如何使用javascript/css对其进行缩放？
回答 1
Stack Overflow用户
发布于 2014-10-01 09:39:33
考虑使用rem单元来处理字体大小，这样它们相对于根元素(主要是<html>元素)的字体大小就很容易扩展。
如果您需要IE8支持，请提供一个像素值作为后盾，如下所示：
html {
font-size: 16px;
}
h1 {
font-size: 1.5rem;
font-size: 24px;
}那么，您所要做的就是通过JavaScript增加根元素的字体大小。
https://stackoverflow.com/questions/24932020
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号