Thuộc tính font-family được sử dụng để chỉ ra phông chữ [có thể là một danh sách phông chữ chữ] cho phần tử. Nếu thiết lập nhiều phông chữ thì các phông chữ được liệt kê cách nhau bởi dấu gạch ngang [,]

Khi một phần tử thiết lập nhiều chữ theo thuộc tính css font-family, trình duyệt sẽ tìm các phông chữ đó trên hệ thống đang chạy [ưu tiên từ trái qua phải], thấy chữ nào thì dùng chữ đó, điều này . ] khi hệ thống phông chữ chữ nó khác tùy ý theo hệ thống. Ví dụ

p {
    font-family: Arial, Helvetica, sans-serif;
}
/*
    Font chữ cho phần tử 
 là: Arial nếu thấy có trong hệ thống, nếu không có
    thì dùng Helvetica, nếu cũng không có Helvetica
    thì dùng font dạng generic : sans-serif
*/

Các tên phông chữ trong CSS

Các tên phông chữ bạn có thể thiết lập cho thuôc tính phông chữ-gia đình có thể là tên các họ phông chữ hoặc tên các họ chung

• họ phông chữ. Là tên phông chữ cụ thể có thể có trong hệ thống, hoặc tên phông chữ do bạn tải vào từ tệp phông chữ chữ [sử dụng quy tắc @ phông chữ - sẽ trình bày sau], ví dụ phông chữ chữ Times New Roman, Arial,
• họ chung. Các phông chữ có hình thức gần giống nhau được xếp vào một nhóm, tên nhóm này được gọi là họ chung. Mỗi chữ cái cụ thể nó sẽ thuộc về một nhóm nào đó. Có các nhóm. serif, sans-serif, chữ thảo, tưởng tượng, đơn cách. Sử dụng chung để đảm bảo tương thích ngược, ví dụ nếu thiết lập

  
     This is a paragraph shown in serif font.
  
  
     This is a paragraph shown in sans-serif font.
   
  
     This is a paragraph shown in monospace font.
   
  
     This is a paragraph shown in cursive font.
   
  
     This is a paragraph shown in fantasy font.
  

  4 thì trình duyệt sẽ tìm trên hệ thống các phông chữ thuộc nhóm sans-serif và sử dụng một phông chữ đầu tiên mà nó tìm thấy.

Bảng sau để biết tên phông chữ chung và tương ứng với một số phông chữ cụ thể có thể thuộc nhóm đó. Có hiện thị theo từng loại phông chữ để bạn nhận biết phông chữ công thức có thể hiển thị

Generic familyFont familySerif
Nhóm các phông chữ sử dụng ít nét trang trí [chân chữ] vượt ra ngoài thân chữ. Loại phông chữ này dễ đọc, dễ in - điển hình là Times New RomanTimes New Roman
Georgia
Palatino
BaskervilleSans-serif
Nhóm font không sử dụng nét trang trí [không chân], loại này dễ đọc nhất trên màn hình, nên nó phổ biến nhất cho các website. Font điển hình là arial.Arial
Arial Black
Verdana
Tahoma
. Phông chữ điển hình Courier
Gill SansMonospace
Nhóm các font mà khoảng cách các chữ đều bằng nhau. Font điển hình CourierCourier New
Lucida Console
Andalé Mono
Courier
Lucida
MonacoCursive
Nhóm font chữ có độ cong mềm giống chữ viết tay.Bradley Hand
Brush Script MT
Comic Sans MS
Ảo tưởng
Nhóm các font chữ nghệ thuật, cách điệu.Luminari

Trong thực tế hành động luôn thiết lập sau các họ phông chữ là tương thích chung, đề phòng trên một máy có thể không có phông chữ đó, trình duyệt sẽ

Ví dụ có HTML as after

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

Use CSS time to setting font chữ cho các đoạn văn bản trên

    p.serif {
       font-family: "Times New Roman", Times, serif;
    }
    p.sansserif {
       font-family: Helvetica, Arial, sans-serif;
    }
    p.monospace {
       font-family: "Courier New", Courier, monospace;
    }
    p.cursive {
       font-family: Florence, cursive;
    }
    p.fantasy {
       font-family: Blippo, fantasy;
    }

Kết quả

Đây là một đoạn văn được hiển thị bằng phông chữ serif

Đây là một đoạn được hiển thị bằng phông chữ sans-serif

Đây là một đoạn văn được hiển thị bằng phông chữ đơn cách

Đây là một đoạn văn được thể hiện bằng phông chữ khó hiểu

Đây là đoạn văn được thể hiện bằng font fantasy

Lưu ý các giá trị trong

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

5 cách nhau bằng dấu

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

6 các giá trị này được duyệt sử dụng thay thế. Nếu phông chữ thứ nhất được tìm thấy không ra, nó sẽ sử dụng phông chữ tiếp theo

bài 13. Font chữ trong CSS [CSS Fonts]

Thuộc tính font chữ trong CSS xác định loại chữ chữ, độ đậm, kích thước và kiểu của văn bản

Chúng ta hãy cùng xem ví dụ đầu tiên

Sự khác biệt giữa phông chữ Serif và Sans-serif

Nội dung

Một số khái niệm

• Generic family [hay có thể gọi là nhóm phông chữ chung] là 1 nhóm phông chữ có giao diện tương tự  [như “Serif” hoặc “Monospace”]
• Họ phông chữ. name 1 font chữ cụ thể [chẳng hạn như “Times New Roman” hoặc “Arial”]

Generic familyFont familyMô tả SerifTimes New Roman
Georgia Các phông chữ thuộc nhóm Serif trên các ký tự có đường kẻ nhỏ ở cuối Sans-serifArial
Verdana“Sans”
Lucida ConsoleTất cả các ký tự đơn có cùng chiều rộng

Lưu ý. Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif

Font-Family [phông chữ]

Font chữ của một văn bản được đặt với thuộc tính_______15

Thuộc tính

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.

  

 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

5 nên giữ nhiều tên phông chữ như một hệ thống “dự án phòng”. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v. v

Bắt đầu với 1 phông chữ bạn muốn và kết thúc là đặt tên cho 1 nhóm phông chữ chung [generic family], để cho phép trình duyệt chọn một phông chữ tương tự trong nhóm đó, nếu không có phông chữ nào khác

Lưu ý. Nếu tên của một phông chữ có nhiều hơn một từ, thì nó phải nằm trong dấu ngoặc kép, như. "Times New Roman"

Nếu có nhiều chữ chữ chỉ được định nghĩa trong danh sách, chúng sẽ được phân tách bằng dấu phẩy

Ví dụ

p {
  font-family: "Times New Roman", Times, serif;
}

Kiểu chữ [Kiểu chữ]

Thuộc tính

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

9 được sử dụng chủ yếu để chỉ định văn bản theo hướng nghiêng

Thuộc tính này có 3 giá trị như sau

• bình thường – Văn bản được hiển thị bình thường
• italic – Văn bản được in nghiêng
• oblique – Văn bản được in nghiêng [giá trị này ít được hỗ trợ bởi trình duyệt]

Ví dụ

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Cỡ chữ [Cỡ chữ]

Thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

0 thiết lập kích thước của văn bản

Tuy nhiên, bạn không nên sử dụng thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

0 để làm cho đoạn văn trông giống như tiêu đề hoặc tiêu đề trông giống như đoạn văn

Hãy sử dụng các thẻ HTML thích hợp, như

– cho các tiêu đề và

cho các đoạn văn.

Kích thước phông chữ có thể là một kích thước tuyệt đối hoặc tương đối

đối kích thước tuyệt vời

• Set text to a default size
• Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt [xấu vì lý do truy cập]
• Kích thước tuyệt đối hữu ích khi biết kích thước vật lý của đầu ra

Convers size

• Đặt kích thước tương ứng với các yếu tố xung quanh
• Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

Lưu ý. Nếu bạn không chỉ định kích thước phông chữ, kích thước sẽ mặc định cho văn bản thông thường, chẳng hạn như đoạn văn bản là 16px [16px = 1em]

Set letter size by pixel

Đặt kích thước văn bản bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản

Ví dụ

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để thay đổi kích thước toàn bộ trang

Set letter size with Em

Để cho phép người dùng thay đổi kích thước văn bản [trong menu trình duyệt], nhiều nhà phát triển sử dụng em thay vì pixel

1em equal to the current font size at. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, default size of 1em is 16px

Kích thước có thể được tính từ pixel đến em bằng công thức này. pixel / 16 = em

Ví dụ

________số 8

Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt

Sử dụng kết hợp phần trăm và em

Để có thể hoạt động trong tất cả các trình duyệt: đặt kích thước phông chữ cho phần tử theo phần trăm :

Ví dụ

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

việc sử dụng kết hợp sẽ giúp hiển thị cùng kích thước văn bản trong tất cả các trình duyệt và cho phép tất cả các trình duyệt duyệt hoặc thay đổi kích thước văn bản

Trọng lượng phông chữ

Thuộc tính _

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

2 được sử dụng chủ yếu để chỉ định văn bản in đậm

Ví dụ

   This is a paragraph shown in serif font.


   This is a paragraph shown in sans-serif font.
 

   This is a paragraph shown in monospace font.
 

   This is a paragraph shown in cursive font.
 

   This is a paragraph shown in fantasy font.

1

Responsive Font Size [Cỡ chữ tương thích]

Kích thước văn bản có thể được đặt bằng đơn vị

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

3, có nghĩa là “chiều rộng khung nhìn”

Bằng cách đó, kích thước văn bản sẽ theo kích thước của cửa sổ duyệt

Ví dụ

1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm thì 1vw là 0,5cm

Biến thể phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

4chỉ định văn bản hiển thị với phông chữ nhỏ, in hoa [nhỏ hơn chữ cái viết hoa gốc trong văn bản]