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

我使用的是webfonts，尤其是Fontsome，它非常棒

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

我现在正在努力研究如何在浏览器缩小时使这种字体自动缩小？也可以在Ipad或其他移动设备上查看

非常感谢

更新

---

我想我还没有说清楚。我试图在浏览器大小改变时，或者当设备改变ie IPad而不是桌面浏览器时，使web字体上下缩放。从本质上说，字体会做出相应的反应。我可能错过了一些东西，因为我是新手。

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

此外，当谈到字体大小时，我强烈建议使用em单位而不是像素。通过这种方式，您可以在元素上设置基本字体大小，例如

元素，然后在页面的其余部分相对于该值设置字体大小。这是假设对于大多数浏览器来说，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%。

自动缩小是什么意思？字体是否必须与视口大小相关？您必须小心使用这种方法，因为您需要设置最小字体大小。另外，您是否研究过CSS媒体查询？你试过什么了？嗨，特里，谢谢你的回复。我没有尝试过任何特别的东西，除了走网络字体路线。我相信我正在努力实现的是一个标准尺寸，然后如果设备更大，比如在一个大的桌面屏幕上，那么图标可以增加，如果在智能手机上，那么图标可以缩小。我想我需要采用一种推荐的/标准的方法。目前，如果我最小化浏览器而不是固定大小的字体，即字体大小：100px，那么如果图标大于浏览器空间，我只会看到部分图标。使用CSS媒体查询断点来确定对每个屏幕分辨率/大小要做什么。我还建议使用em值而不是像素，因为您可以轻松设置基本字体大小，并且所有大小都与之相关。谢谢您的帮助。我是否认为只有CSS3才能做到这一点？这也是关于em值的好提示。谢谢