use*_*129 48 html css fonts twitter-bootstrap
我正在创建一个博客站点,我想更改Bootstrap字体.在我的导入CSS标题中我添加了这个字体
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
我如何使用它作为我的bootstrap默认字体？
小智 61
首先,你不能以这种方式将字体导入CSS.
您可以在HTML头中添加此代码:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
或者在CSS文件中导入它,如下所示:
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
然后在你的bootstrap.css中你可以编辑body的font-family或者添加一个新的:
body {
font-family: 'Oswald', sans-serif !important;
}
Nel*_*mel 44
如果您使用Sass,则定义了Bootstrap变量!default,其中您将找到字体系列.您可以.scss在包含Bootstrap Sass文件之前在您自己的文件中设置变量,并且!default不会覆盖您的.以下是对!default工作原理的一个很好的解释:https://robots.thoughtbot.com/sass-default.
这是一个未经测试的例子,使用Bootstrap 4,npm,Gulp,gulp -sass和gulp-cssmin来告诉你如何将它连接在一起.
的package.json
{
"devDependencies": {
"bootstrap": "4.0.0-alpha.6",
"gulp": "3.9.1",
"gulp-sass": "3.1.0",
"gulp-cssmin": "0.2.0"
}
}
mysite.scss
@import "./myvariables";
// Bootstrap
@import "bootstrap/scss/variables";
// ... need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list
_myvariables.scss
// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss
// These are the defaults, but you can override any values
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass"),
cssmin = require("gulp-cssmin");
gulp.task("transpile:sass", function() {
return gulp.src("./mysite.scss")
.pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError))
.pipe(cssmin())
.pipe(gulp.dest("./css/"));
});
的index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mysite.css" />
</head>
<body>
...
</body>
</html>
pun*_*ist 30
我认为最好和最干净的方法是获得自定义下载引导程序.
http://getbootstrap.com/customize/
然后,您可以更改排版中的字体默认值(在该链接中).然后,这会为您提供一个.Less文件,您可以稍后对默认值进行进一步更改.
Ali*_*ani 16
如果你有一个custom.css文件,那就做一些像:
font-family: "Oswald", Helvetica, Arial, sans-serif!important;
小智 13
此页面上的大多数答案似乎都建议自定义引导变量。
然而，对于 Bootstrap 5 来说，首选方法似乎是使用 CSS 变量。https://getbootstrap.com/docs/5.1/customize/css-variables/
例如，body font-family 在 _reboot.scss 中设置，以使用在 _root.scss 中设置的 CSS 变量 bs-body-font-family。所以你可以重新定义这个CSS变量：
body { --bs-body-font-family: 'YOUR GOOGLE FONT'; }
使用引导5 SASS
使用$font-family-base、$font-size-base和$line-height-base属性作为应用于“正文”的排版基础。
https://getbootstrap.com/docs/5.0/content/typography/
另一种方法是下载源代码,然后更改以下的vaiablesvariables.less
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
然后将其编译为.css文件