html - CSS:在所有元素中按比例放大自定义字体

Question

我想使用 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 元素共享相同的大小( Bootstrap 的所有自定义设置也被覆盖)，我不能那样使用它。我想相对于其原始(例如 Bootstrap )大小更改所有元素。如果我手动完成，我将不得不重写数百个元素，所以这是一个糟糕的选择。我怎样才能以干净简单的方式做到这一点？

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

Answer 1

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