2

我正在使用 webfonts，尤其是 FontAwesome，它很棒。

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

我现在正在尝试弄清楚当浏览器缩小时如何让这种字体自动缩小？在 Ipad 或其他移动设备上查看时也是如此。

提前谢谢了。

更新

我相信我还没有说清楚。我试图在浏览器大小发生变化或设备发生变化时放大和缩小网络字体，即 iPad 而不是桌面浏览器。本质上让字体做出响应。我可能错过了一些东西，因为我对此很陌生。

4

1 回答 1

2

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

此外，在字体大小方面，我强烈建议使用 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%。

于 2013-11-05T16:17:30.520 回答