关于仅使用CSS覆盖

Question

我收到了大量的信息，想在这里提出这个问题。我在某些地方读过应该从html元素更改字体大小，例如：

html { font-size: 14px }

bootstrap 4 rem值会相应地更新文本。

有趣的是，如果我将html元素的font-size保持为默认值并更改引导变量以更改字体大小，那么我做错了吗？

例如：

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

Answer 1

带着所有的困惑和许多不同的答案。我找到了bootstrap的作者，问题是一劳永逸地清理它。

现在我们需要更改 $ font-size-base ，这将直接更改根字体大小。

我也被他们的贡献者建议不要用html元素控制font-size而是改为改造bootstrap的变量。

参考：https://github.com/twbs/bootstrap/pull/24060

关于仅使用CSS覆盖

的注意事项

使用提供的css示例不适用于bootstrap大小调整的所有方面。

scss的编译结果使用$font-size-base变量来调整很多东西，并且可能在将来的更多区域中使用。

List of sized elements

下拉字体
按钮字体
popover font
输入组字体
表格字体
重新启动字体

--------------示例SCSS --------------

这是scss文件的一个示例，请注意您需要在主scss文件中定义$font-size-base BEFORE包括引导程序。在这种情况下，app.scss文件是正在编译的文件。

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- this is where you defined the variables 
//              BEFORE importing bootstrap which will use it's  
//              defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

_variables.scss

// Body
$body-bg: #ffffff;

// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

Answer 2

Bootstrap将font-size中的基础_reboot.scss定义为

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

注意： - 永远不要将默认值更改为框架文件，请始终使用自定义css / js文件修改值。

所以为了将您的字体大小更改为14px，请在您自己的style.css（自定义css文件）中使用它

body {
    font-size: 0.875rem;
 }

以下是working fiddle

使用!important您无法看到更改以覆盖默认情况下的更改。

在custom.scss文件中，请执行以下操作：

$custom-variable:0.875rem;

然后像这样使用它：

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size:$custom-variable;
}

Answer 3

出于以下几个原因，建议您直接更新html {font-size: 16px}属性，而不要更改Bootstrap的$font-size-base：

html的字体大小将直接用于计算最终字体大小。使用“中介” （即body由Bootstrap的$font-size-base进行调整）没有好处。
Bootstrap的SCSS系统使用$font-size-base计算标题大小等，因此所有受Bootstrap影响的CSS规则都将受到影响，其中包括body（设置为 $font-size-base$ ）。
但是，浏览器会根据rem受影响的元素（例如html {font-size}）相对于$font-size-base计算body中相对于html {font-size}的任何CSS字体大小规则。
使用px设置rem会影响Bootstrap受影响元素内部和外部的任何$font-size-base值，如果要实现的话。

相反，如果您只想设置受Bootstrap影响的元素的大小，请 do 相对于html {font-size}设置$font-size-base，因此Bootstrap外部的CSS元素将< em>不受到影响。但是我会说这更多是边缘情况，而不是常规情况。

注意：
如果您设置variables.scss或任何其他Bootstrap变量，则不必修改node_modules/bootstrap/scss/variables文件。您应该在导入!default和其他Bootstrap文件之前定义变量，以便使用您的值，而不是在Bootstrap中设置的variables.scss值。优点：无需编辑整个public interface BaseService<T> { List<T> getAll(); Optional<T> findById(long id); T save(T user); void delete(long id); } @Service public class UserService implements BaseService<User> {文件。

如何在Bootstrap 4中使用Sass更改字体大小？

3 个答案:

关于仅使用CSS覆盖

--------------示例SCSS --------------