Pertanyaan Bagaimana cara mengubah font font bawaan Bootstrap menggunakan font dari Google?


Saya membuat situs blog dan saya ingin mengubah font Bootstrap. Dalam CSS impor saya di header saya menambahkan font ini

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

Bagaimana saya bisa menggunakan ini sebagai font default bootstrap saya?


35
2018-06-06 06:03


asal


Jawaban:


Pertama-tama Anda tidak dapat mengimpor font ke CSS dengan cara itu.

Anda dapat menambahkan kode ini di kepala HTML:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

atau mengimpornya dalam file CSS seperti ini:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

Kemudian di bootstrap Anda, Anda dapat mengedit font-family body atau menambahkan yang baru:

body {
  font-family: 'Oswald', sans-serif !important;
}

48
2018-06-06 07:58



Saya pikir cara terbaik dan terbersih adalah mendapatkan unduhan bootstrap ubahsuaian.

http://getbootstrap.com/customize/

Anda kemudian dapat mengubah font-default dalam Tipografi (di tautan itu). Ini kemudian memberi Anda file .Less yang dapat Anda buat perubahan lebih lanjut ke default dengan nanti.


26
2018-06-06 06:08



Jika Anda menggunakan Kelancangan, ada variabel Bootstrap didefinisikan dengan !default, di antaranya Anda akan menemukan keluarga font. Anda hanya dapat mengatur variabel sendiri .scss file sebelum memasukkan file Bootstrap Sass dan !default tidak akan menimpa milik Anda. Berikut penjelasan yang bagus tentang caranya !default bekerja: https://robots.thoughtbot.com/sass-default.

Berikut contoh yang belum diuji menggunakan Bootstrap 4, npm, Meneguk, meneguk dan gulp-cssmin untuk memberi Anda gambaran bagaimana Anda dapat menghubungkan hal ini bersama.

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>

15
2018-04-29 18:51



Jika Anda punya custom.css file, di sana, hanya melakukan sesuatu seperti:

font-family: "Oswald", Helvetica, Arial, sans-serif!important;

11
2018-06-06 06:06



Cara lain adalah mengunduh Kode sumber kemudian ganti vaiabel berikut di variables.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;

Dan kemudian kompilasi ke .css mengajukan


5
2018-06-06 06:12



Itu bootstrap-live-customizer adalah sumber yang baik untuk menyesuaikan tema bootstrap Anda sendiri dan melihat hasilnya langsung saat Anda menyesuaikan. Menggunakan situs web ini sangat mudah untuk mengedit font dan kemudian mengunduh file .css yang diperbarui.


2
2018-06-14 01:31