Hướng dẫn bootstrap font-family - bootstrap font-family

Thiết lập toàn cầu

Bootstrap đặt ra các kiểu hiển thị, kiểu chữ và liên kết toàn cầu cơ bản. Khi cần kiểm soát nhiều hơn, hãy kiểm tra các lớp tiện ích văn bản.

• Sử dụng ngăn xếp phông chữ gốc chọn

  <p class="h2">h2. Bootstrap headingp>
  <p class="h2">h2. Bootstrap headingp>
  <p class="h3">h3. Bootstrap headingp>
  <p class="h4">h4. Bootstrap headingp>
  <p class="h5">h5. Bootstrap headingp>
  <p class="h6">h6. Bootstrap headingp>

  7 tốt nhất cho mỗi hệ điều hành và thiết bị.
• Đối với tỷ lệ loại toàn diện và có thể truy cập hơn, chúng tôi sử dụng root mặc định của trình duyệt

  <p class="h2">h2. Bootstrap headingp>
  <p class="h2">h2. Bootstrap headingp>
  <p class="h3">h3. Bootstrap headingp>
  <p class="h4">h4. Bootstrap headingp>
  <p class="h5">h5. Bootstrap headingp>
  <p class="h6">h6. Bootstrap headingp>

  8 (thường là 16px) để khách truy cập có thể tùy chỉnh mặc định trình duyệt của họ khi cần.
• Sử dụng các thuộc tính

  <p class="h2">h2. Bootstrap headingp>
  <p class="h2">h2. Bootstrap headingp>
  <p class="h3">h3. Bootstrap headingp>
  <p class="h4">h4. Bootstrap headingp>
  <p class="h5">h5. Bootstrap headingp>
  <p class="h6">h6. Bootstrap headingp>

  9,

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  0 và

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  1 làm cơ sở chính tả của chúng tôi được áp dụng cho

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  2.
• Đặt màu liên kết toàn cầu thông qua

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  3.
• Sử dụng

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  4 để đặt

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  5 trên

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  2 (

  <h3>
    Fancy display heading
    <small class="text-muted">With faded secondary textsmall>
  h3>

  7 theo mặc định).

Các phong cách này có thể được tìm thấy trong

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary textsmall>
h3>

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary textsmall>
h3>

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary textsmall>
h3>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

Tiêu đề

Tất cả các tiêu đề HTML,

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

<h2>h2. Bootstrap headingh2>
<h2>h2. Bootstrap headingh2>
<h3>h3. Bootstrap headingh3>
<h4>h4. Bootstrap headingh4>
<h5>h5. Bootstrap headingh5>
<h6>h6. Bootstrap headingh6>

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

H2. Tiêu đề bootstrap

H2. Tiêu đề bootstrap

H3. Tiêu đề bootstrap

H4. Tiêu đề bootstrap

H5. Tiêu đề bootstrap

H6. Tiêu đề bootstrap

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

$display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 0 đến các lớp $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 1 cũng có sẵn, vì khi bạn muốn khớp với kiểu chữ của tiêu đề nhưng không thể sử dụng phần tử HTML được liên kết.

Tùy chỉnh tiêu đề

Sử dụng các lớp tiện ích đi kèm để tạo lại văn bản tiêu đề thứ cấp nhỏ từ Bootstrap 3.

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary textsmall>
h3>

Hiển thị ưa thích tiêu đề với văn bản thứ cấp phai màu

Hiển thị tiêu đềdisplay heading—a larger, slightly more opinionated heading style.

Các yếu tố tiêu đề truyền thống được thiết kế để hoạt động tốt nhất trong phần thịt của nội dung trang của bạn. Khi bạn cần một tiêu đề để nổi bật, hãy xem xét sử dụng một tiêu đề hiển thị, một phong cách tiêu đề lớn hơn, hơi có ý kiến ​​hơn một chút.

Hiển thị 1

Hiển thị 2

Hiển thị 3

Hiển thị 4

Hiển thị 5

<h2 class="display-1">Display 1h2>
<h2 class="display-2">Display 2h2>
<h2 class="display-3">Display 3h2>
<h2 class="display-4">Display 4h2>
<h2 class="display-5">Display 5h2>
<h2 class="display-6">Display 6h2>

Hiển thị 6

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Các tiêu đề hiển thị được cấu hình thông qua bản đồ SASS $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 2 và hai biến, $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 3 và $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 4.

Chỉ huy

Tạo một đoạn văn nổi bật bằng cách thêm

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
p>

Đây là một đoạn chính. Nó nổi bật từ các đoạn văn thông thường.

Các yếu tố văn bản nội tuyến

Kiểu dáng cho các yếu tố HTML5 nội tuyến chung.

Bạn có thể sử dụng thẻ đánh dấu để làm nổi bật văn bản.

Dòng văn bản này có nghĩa là được coi là văn bản bị xóa.

Dòng văn bản này có nghĩa là được coi là không còn chính xác.

Dòng văn bản này có nghĩa là được coi là một bổ sung cho tài liệu.

Dòng văn bản này sẽ hiển thị dưới dạng gạch chân.

Dòng văn bản này có nghĩa là được coi là bản in đẹp.

Dòng này được hiển thị dưới dạng văn bản táo bạo.

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlined.u>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>

Dòng này được hiển thị dưới dạng văn bản in nghiêng.

• Coi chừng các thẻ đó nên được sử dụng cho mục đích ngữ nghĩa:

• $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  6 đại diện cho văn bản được đánh dấu hoặc đánh dấu cho mục đích tham khảo hoặc ký hiệu.

• $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  7 đại diện cho các phần phụ và bản in nhỏ, như bản quyền và văn bản pháp lý.

• $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  8 đại diện cho yếu tố không còn liên quan hoặc không còn chính xác.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

• Nếu bạn muốn tạo kiểu văn bản của mình, thay vào đó, bạn nên sử dụng các lớp sau:

• <p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
  p>

  0 sẽ áp dụng các kiểu tương tự như

  $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  6.

• <p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
  p>

  2 sẽ áp dụng các kiểu tương tự như

  $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  7.

• <p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
  p>

  4 sẽ áp dụng các kiểu tương tự như

  $display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem
  );
  
  $display-font-weight: 300;
  $display-line-height: $headings-line-height;
  

  9.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
p>

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Mặc dù không được hiển thị ở trên, hãy thoải mái sử dụng

This is a lead paragraph. It stands out from regular paragraphs.

8 và

This is a lead paragraph. It stands out from regular paragraphs.

9 trong HTML5.

This is a lead paragraph. It stands out from regular paragraphs.

8 có nghĩa là để làm nổi bật các từ hoặc cụm từ mà không truyền đạt tầm quan trọng bổ sung, trong khi

This is a lead paragraph. It stands out from regular paragraphs.

9 chủ yếu dành cho giọng nói, thuật ngữ kỹ thuật, v.v.

Tiện ích văn bản

Thay đổi căn chỉnh văn bản, biến đổi, phong cách, trọng lượng, chiều cao dòng, trang trí và màu sắc với các tiện ích văn bản và các tiện ích màu sắc của chúng tôi.

Các từ viết tắt

Việc thực hiện cách điệu của yếu tố HTML,

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlined.u>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

Thêm

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

3 vào chữ viết tắt cho kích thước phông chữ nhỏ hơn một chút.

Blockquotes

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn. Bao bọc

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlined.u>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>

4 xung quanh bất kỳ HTML nào là trích dẫn.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.p>
blockquote>

Một trích dẫn nổi tiếng, chứa trong một phần tử blockquote.

Đặt tên một nguồn

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn. Bao bọc

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlined.u>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>

4 xung quanh bất kỳ HTML nào là trích dẫn.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.p>
  blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Titlecite>
  figcaption>
figure>

Liên kết

Sử dụng các tiện ích văn bản khi cần thiết để thay đổi sự liên kết của blockquote của bạn.

Một trích dẫn nổi tiếng, chứa trong một phần tử blockquote.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Một trích dẫn nổi tiếng, chứa trong một phần tử blockquote.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Danh sách

Không được biết

Hủy bỏ

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

• Đây là một danh sách.
• Nó xuất hiện hoàn toàn không có chiều.
• Về mặt cấu trúc, nó vẫn là một danh sách.
• Tuy nhiên, phong cách này chỉ áp dụng cho các yếu tố trẻ em ngay lập tức.
• Danh sách lồng nhau:
  • không bị ảnh hưởng bởi phong cách này
  • vẫn sẽ hiển thị một viên đạn
  • và có lề trái thích hợp
• Điều này vẫn có thể có ích trong một số tình huống.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Nội tuyến

Hủy bỏ một viên đạn danh sách và áp dụng một số ánh sáng

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

• Đây là một mục danh sách.
• Và một cái khác.
• Nhưng chúng được hiển thị nội tuyến.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Mô tả Danh sách căn chỉnh

Căn chỉnh các thuật ngữ và mô tả theo chiều ngang bằng cách sử dụng các lớp được xác định trước của hệ thống lưới (hoặc các bản phối âm ngữ nghĩa). Để có các thuật ngữ dài hơn, bạn có thể tùy chọn thêm một lớp

<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

Mô tả Danh sách Danh sách Mô tả là hoàn hảo để xác định thuật ngữ. hạn

Định nghĩa cho thuật ngữ.

Và một số văn bản định nghĩa giữ chỗ hơn.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Kích thước phông chữ đáp ứng

Trong Bootstrap 5, chúng tôi đã kích thước phông chữ đáp ứng theo mặc định, cho phép văn bản mở rộng quy mô tự nhiên hơn trên các kích thước thiết bị và chế độ xem. Hãy xem trang RFS để tìm hiểu cách thức hoạt động của nó.

Sass

Biến

Các tiêu đề có một số biến chuyên dụng để định cỡ và khoảng cách.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Các yếu tố kiểu chữ linh tinh được đề cập ở đây và trong khởi động lại cũng có các biến chuyên dụng.

<p class="h2">h2. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Mixins

Không có hỗn hợp chuyên dụng cho kiểu chữ, nhưng Bootstrap không sử dụng kích thước phông chữ đáp ứng (RFS).