Question

我正在使用webfonts，特别是FontAwesome，这很棒。

<i class="fa fa-book" style="color:purple; font-size:100px; padding:10px 10px 10px 10px;"></i>

我现在正试图弄清楚如何在浏览器尺寸减小时自动缩小此字体？此外，当在Ipad或其他移动设备上查看时。

非常感谢提前。

更新

我相信我没有说清楚。我试图在浏览器大小更改时，或者当设备更改即IPad而不是桌面浏览器时，使Web字体缩放。从本质上讲，字体会起反应作用。我可能已经错过了一些东西，因为我对此很陌生。

Answer 1

如果您希望根据视口大小更改字体大小，我建议使用CSS媒体查询断点。屏幕尺寸或分辨率和方向的组合方式几乎无穷无尽，但this article为您提供了在设计移动设备，平板电脑和桌面优化布局时有用的常用断点。

另外，在字体大小方面，我强烈建议使用em单位而不是像素。这样，您可以在<body>元素上设置基本字体大小，然后在页面的其余部分设置相对于该值的字体大小。这假设对于大多数浏览器而言，16px是事实上的字体大小：

html {
    font-size: 100%;
}
body {
    font-size: 1em; /* 16px default */
    /* If you want the baseline grid to be 10px, use font-size: 62.5% instead */
}
h1 {
    font-size: 5em; /* 80px, because 16*5=80 */
}

对于断点，例如，宽度小于680px：

/* Breakpoint for tablets */
@media only screen and (min-width: 0px) and (max-width: 679px) {
    body {
        font-size: .5em; /* Sets document font size to 8px */
    }
}

这将导致整个页面的字体大小（当然使用em单位）减少50％。

如何在调整浏览器等时自动重新缩放webfonts

1 个答案: