web-dev-qa-db-ja.com

Bootstrap 4で異なるフォントを使用する方法は？

私は初心者です。私はBootstrap 4にこのデフォルトのように異なるフォントを割り当てることができることを知っています、

font-family: -Apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

たとえば、2つのフォントペアリングを使用してWebサイトを構築しようとした場合に知りたいことは、

font-family: "Roboto", "Open Sans";

上記のコードはBootstrap 4.の要素にどのように影響しますか。4. RobotoまたはOpen Sansを取得する要素はどれですか。

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4twitter-bootstrap-4-beta
5
CodeMan

scssユーザーの場合：

ここからGoogleフォントを選択したとしましょう（ページをすばやく読み込むために選択を少なくします）： https://fonts.google.com/specimen/Roboto

そして、それをindex.html in <head>：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

または、スタイルシートに配置します。

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
</style>

そしてscssでこれを行います：

$font-family-base: 'Roboto', sans-serif; // add this line first before importing bootstrap
@import "~bootstrap/scss/bootstrap";

それでおしまい。

9
Syed

bootstrapクラスを独自のcssルールでオーバーライドできます。

例えば：

p {
  font-family: "Roboto", sans-serif;
}
2
Dario

これは、スタイルを設定しようとしている要素に割り当てられるため、たとえば次のようになります。

h1,h2,h3,h4,h5,h6 {
font-family: "Roboto";
}

これにより、すべての見出しにRobotoが割り当てられます...

1
Jack Isaacs

Bootstraps sass変数を使用して、デフォルトのfont-familyを変更することもできます。これがデフォルト値です$font-family-sans-serif: -Apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-family-sans-serif: Roboto;

好きなように変更して、sassコンパイラを使用してビルドできます。

1
Manoj

さらに、各フォントをどの段落に適用するかを指定することもできます。

<p class="sentenceA">First Paragraph with Roboto font applied to it.</p>
<p class="sentenceB">Second Paragraph with Open Sans font applied to it.</p>
<p class="sentenceC">Third Paragraph with Roboto and Open Sans fonts applied to it.</p>

//and in your stylesheet have something like:    

    .sentenceA p
    {
        font-family: "Roboto";
    }

    .sentenceB p
    {
      font-family: "Open Sans";
    }        

    .sentenceC p
    {
       font-family: "Roboto", "Open Sans";
    }

お役に立てれば。

0
Sid Khanye

<p class="text-monospace">This is in monospace</p> .text-monospaceを使用して、選択範囲をモノスペースフォントスタックに変更します。

0
Jerry King