Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS Nền CSS Đường viền CSS Lề CSS CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS Văn bản CSS Phông chữ CSS Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients Bóng CSS Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Ghép nối phông chữ tuyệt vời CSS


Các cặp phông chữ tuyệt vời là điều cần thiết để tạo ra một thiết kế tuyệt vời.


Quy tắc ghép nối phông chữ

Dưới đây là một số quy tắc cơ bản để tạo các cặp phông chữ tuyệt vời:

1. Bổ sung

Luôn luôn an toàn để tìm các cặp phông chữ bổ sung cho nhau.

Một sự kết hợp phông chữ tuyệt vời phải hài hòa, không quá giống hoặc quá khác biệt.

2. Sử dụng Phông chữ Superfamilies

Siêu họ phông chữ là một tập hợp các phông chữ được thiết kế để hoạt động tốt với nhau. Vì vậy, sử dụng các phông chữ khác nhau trong cùng một siêu họ là an toàn.

Ví dụ: siêu họ Lucida chứa các phông chữ sau: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif và Lucida Math.

3. Tương phản là Vua

Hai phông chữ quá giống nhau thường sẽ xung đột. Tuy nhiên, sự tương phản, được thực hiện đúng cách sẽ mang lại những gì tốt nhất trong mỗi phông chữ.

Ví dụ: Kết hợp serif với sans serif là một sự kết hợp nổi tiếng.

Một siêu họ mạnh bao gồm cả các biến thể serif và sans serif của cùng một phông chữ (ví dụ: Lucida và Lucida Sans).

4. Chỉ chọn một ông chủ

Một phông chữ nên là ông chủ. Điều này thiết lập một hệ thống phân cấp cho các phông chữ trên trang của bạn. Điều này có thể đạt được bằng cách thay đổi kích thước, trọng lượng và màu sắc.

Thí dụ

Không nghi ngờ gì nữa, "Georgia" là ông chủ ở đây:

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

Dưới đây, chúng tôi đã chỉ ra một số cặp phông chữ phổ biến sẽ phù hợp với nhiều thương hiệu và ngữ cảnh.



Georgia và Verdana

Georgia và Verdana là một sự kết hợp cổ điển. Nó cũng tuân theo các tiêu chuẩn phông chữ an toàn trên web:

Thí dụ

Sử dụng phông chữ "Georgia" cho tiêu đề và "Verdana" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Helvetica và Garamond

Helvetica và Garamond là một sự kết hợp cổ điển khác sử dụng phông chữ an toàn cho web:

Thí dụ

Sử dụng phông chữ "Helvetica" cho tiêu đề và "Garamond" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Các cặp phông chữ phổ biến của Google

Nếu bạn không muốn sử dụng phông chữ tiêu chuẩn trong HTML, bạn có thể sử dụng Google Fonts.

Google Fonts được sử dụng miễn phí và có hơn 1000 phông chữ để bạn lựa chọn.

Dưới đây là một số Ghép nối Phông chữ Web phổ biến của Google.


Merriweather và Open Sans

Thí dụ

Sử dụng phông chữ "Merriweather" cho tiêu đề và "Open Sans" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Ubuntu và Lora

Thí dụ

Sử dụng phông chữ "Ubuntu" cho tiêu đề và "Lora" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Abril Fatface và Poppins

Thí dụ

Sử dụng phông chữ "Abril Fatface" cho tiêu đề và "Poppins" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Cinzel và Fauna One

Thí dụ

Sử dụng phông chữ "Cinzel" cho tiêu đề và "Fauna One" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Mountain One và Libre Baskerville

Thí dụ

Sử dụng phông chữ "Fjalla One" cho tiêu đề và "Libre Baskerville" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Space Mono và Muli

Thí dụ

Sử dụng phông chữ "Space Mono" cho tiêu đề và "Muli" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Quang phổ và Rubik

Thí dụ

Sử dụng phông chữ "Spectral" cho tiêu đề và "Rubik" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.


Oswald và Noto Sans

Thí dụ

Sử dụng phông chữ "Oswald" cho tiêu đề và "Noto Sans" cho văn bản:

Beautiful Norway

Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.

Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.

Để có danh sách tất cả các Phông chữ Google miễn phí, hãy truy cập Cách thực hiện - Hướng dẫn sử dụng Phông chữ Google của chúng tôi .