CSS：在所有元素中按比例放大自定义字体答案

【问题标题】：CSS: enlarge custom font proportionally in all elementsCSS：在所有元素中按比例放大自定义字体
【发布时间】：2015-03-27 07:07:54
【问题描述】：

我想使用custom font。当我使用

将其加载到页面中时

@font-face {
    font-family: 'Echelon';
    src: url('font/echelon-rg.ttf');
    font-style: normal;
}
@font-face {
    font-family: 'Echelon';
    src: url('font/echelon-it.ttf');
    font-style: italic;
}

然后它比我浏览器中可用的所有默认字体小。我想放大它们，假设是当前大小的 150%。问题是当我这样做时

body * {
    font-family: Echelon;
    font-size: 150%;
}

然后所有 h1..h6、p、div、span 元素共享相同的大小（引导程序的所有自定义设置也被覆盖），我不能那样使用它。我想将所有元素相对于它们的原始（例如引导程序）大小进行更改。如果我手动完成，我将不得不重写数百个元素，所以这是一个糟糕的选择。我怎样才能以干净简单的方式做到这一点？

PS 这与窗口/屏幕大小无关。

【问题讨论】：

重写现有的并不是一个糟糕的选择。无论如何，您的 CSS 不应该真的有 那么多 多 font-size 声明。
但这对我来说是一个非常耗时的选择。太贵了。 Twitter Bootstrap 提供了那个很多声明，所以这不是我的设计。
你能不能不用.echelon {font-family: Echelon; font-size: 150%;}然后只给你想用这个字体的元素那个class？
@Pete 这是解决问题的方法。到目前为止，我正在寻找一个完整的解决方案来解决这个问题。如果它不存在，那么我会寻找一个克服。
你可以看看使用font-size-adjust 不确定是否能满足你的需求

标签： html css twitter-bootstrap fonts font-size

【解决方案1】：

不要声明正文，而是尝试声明您需要在 CSS 中更改的某些部分，这样您就不需要手动更改。可以说，您希望您的段落单独为 150%，然后声明为： p{ font-size: 150% } 在您的 CSS 中，这应该仅限于段落。希望它有所帮助:-)

【讨论】：