Kích thước phông chữ Css không được đặt. Thiết kế phông chữ trong CSS. Font-size - đặt kích thước phông chữ trong CSS

Hình nhỏ

Hình nhỏ

Nhiều hơn bình thường

Ít hơn bình thường

Chữ in nghiêng

Chữ in nghiêng

Với dấu gạch dưới

gạch bỏ

Khả năng thuộc tính phong cách

Ngoài các thẻ được mô tả, còn có một số cách khác để thay đổi phông chữ trong html. Một trong số đó là việc sử dụng phổ quát thuộc tính phong cách. Sử dụng các giá trị thuộc tính của nó, bạn có thể đặt kiểu hiển thị của phông chữ:

1) họ phông chữ – thuộc tính đặt họ phông chữ. Có thể liệt kê nhiều giá trị.
Việc thay đổi phông chữ trong html sang giá trị tiếp theo sẽ xảy ra nếu dòng trước đó không được cài đặt trên hệ điều hành của người dùng.

Cú pháp viết:

họ phông chữ: tên phông chữ [, tên phông chữ [, ...]]

2) cỡ chữ – kích thước được đặt từ 1 đến 7. Đây là một trong những cách chính để bạn có thể tăng phông chữ trong HTML.
Cú pháp viết:

cỡ chữ: kích thước tuyệt đối | kích thước tương đối| ý nghĩa | quan tâm | thừa kế

Bạn cũng có thể đặt kích thước phông chữ:

• Tính bằng pixel;
• Về mặt tuyệt đối ( xx-nhỏ, x-nhỏ, nhỏ, vừa, lớn);
• Theo tỷ lệ phần trăm;
• Tính theo điểm (pt).

Cỡ chữ:7

Cỡ chữ:24px

Cỡ chữ: x-lớn

Cỡ chữ: 200%

Cỡ chữ:24pt

3) kiểu phông chữ - đặt kiểu viết phông chữ. Cú pháp:

kiểu phông chữ: bình thường | in nghiêng | xiên | thừa kế

Giá trị:

• bình thường – chính tả bình thường;
• in nghiêng – in nghiêng;
• xiên – phông chữ nghiêng về bên phải;
• kế thừa - kế thừa cách viết của phần tử cha.

Một ví dụ về cách thay đổi phông chữ trong html bằng thuộc tính này:

kiểu phông chữ: kế thừa

kiểu chữ: nghiêng

kiểu phông chữ: bình thường

kiểu chữ: xiên

4) font-variant – chuyển đổi tất cả các chữ in hoa thành chữ in hoa. Cú pháp:

biến thể phông chữ: bình thường | vốn hóa nhỏ | thừa kế

Một ví dụ về cách thay đổi phông chữ trong html bằng thuộc tính này:

biến thể phông chữ: kế thừa

biến thể phông chữ: bình thường

biến thể phông chữ:chữ hoa nhỏ

5) font-weight – cho phép bạn đặt độ dày của văn bản (độ bão hòa). Cú pháp:

font-weight: đậm|đậm hơn|nhạt hơn|bình thường|100|200|300|400|500|600|700|800|900

Giá trị:

• in đậm – đặt phông chữ html thành in đậm;
• đậm hơn - táo bạo hơn so với bình thường;
• nhẹ hơn – ít bão hòa hơn so với bình thường;
• bình thường – chính tả bình thường;
• 100-900 – đặt độ dày phông chữ tương đương với số.

độ dày phông chữ: đậm

font-weight:đậm hơn

font-weight:nhẹ hơn

độ dày phông chữ: bình thường

trọng lượng phông chữ: 900

trọng lượng phông chữ: 100

Thuộc tính phông chữ và màu phông chữ HTML

Phông chữ là một thuộc tính chứa khác. Bên trong chính nó, nó kết hợp các giá trị của một số thuộc tính nhằm thay đổi phông chữ. cú pháp phông chữ:

phông chữ: họ phông chữ cỡ chữ | thừa kế

Giá trị này cũng có thể được đặt thành phông chữ được hệ thống sử dụng trong nhãn trên các điều khiển khác nhau:

• chú thích – cho các nút;
• biểu tượng – dành cho biểu tượng;
• thực đơn - thực đơn;
• hộp thông báo – dành cho hộp thoại;
• chú thích nhỏ – dành cho các điều khiển nhỏ;
• thanh trạng thái - phông chữ thanh trạng thái.

phông chữ:biểu tượng

phông chữ:chú thích

phông chữ: thực đơn

phông chữ: hộp tin nhắn

chú thích nhỏ

phông chữ: thanh trạng thái

phông chữ:nghiêng 50px in đậm "Times New Roman", Times, serif

Để đặt màu phông chữ trong HTML, bạn có thể sử dụng thuộc tính color. Nó cho phép bạn thiết lập màu bằng cách sử dụng từ khóa, và trong định dạng rgb. Và cả trong mã thập lục phân.

màu:#00FF99

màu: xanh

màu:rgb(0, 255, 153)

Phông chữ tiếng Nga và sự hỗ trợ của chúng

Không phải tất cả những thứ được cài đặt trong các hệ điều hành phông chữ hỗ trợ bố cục tiếng Nga. Vì vậy, trong quá trình phát triển web, tốt nhất nên sử dụng các họ phông chữ đã được thử nghiệm trong thực tế. Dưới đây là các phông chữ tiếng Nga cho html.

Vì vậy, bằng cách sử dụng họ phông chữ, bạn có thể đặt kiểu chữ và kiểu phông chữ, mà bạn cần áp dụng cho một thẻ cụ thể (ví dụ: cho đoạn P hoặc tiêu đề). Rõ ràng là bạn sẽ chỉ định phần tử mà bạn muốn áp dụng thuộc tính này trong mã CSS bằng cách sử dụng bộ chọn (chúng tôi đã nói chi tiết về chúng và liên kết tương ứng được cung cấp ở đầu ấn phẩm).

Hãy để tôi nhắc bạn về cú pháp viết các quy tắc CSS:

Những thứ kia. Thuộc tính được viết đầu tiên, theo sau là dấu hai chấm - giá trị của nó. Các quy tắc được quy định cho mỗi bộ chọn được phân tách với nhau bằng dấu chấm phẩy (sau quy tắc cuối cùng bạn có thể bỏ qua):

Bây giờ chúng ta hãy chuyển trực tiếp đến cú pháp họ phông chữ, bởi vì có những sắc thái nhỏ ở đây. Trong thuộc tính CSS này, bạn cần liệt kê các họ phông chữ theo thứ tự ưu tiên giảm dần (nếu phông chữ đầu tiên không được cài đặt trên máy tính của người dùng thì phông chữ thứ hai trong danh sách sẽ được áp dụng, v.v. trong danh sách), và cuối cùng, bạn sẽ cần thêm một họ, ví dụ: sans-serif (nếu không có họ nào phông chữ được liệt kê không được phát hiện trên máy tính của người dùng, một trong những họ được chỉ định sẽ được áp dụng).

Trong ví dụ trên, trước tiên trình duyệt sẽ tìm kiếm Arial đã cài đặt trên máy tính của người dùng và nếu tìm thấy thì đưa ra Html Kết quả là phần tử sẽ được nó hiển thị. Điều gì sẽ xảy ra nếu không tìm thấy Arial trên máy tính của người dùng? Sau đó, trình duyệt sẽ tìm kiếm Geneva và nếu thất bại, Helvetica, vì nó xuất hiện theo thứ tự ưu tiên giảm dần trong họ phông chữ. Rõ ràng?

Chà, nếu người dùng quá phấn khích đến mức không tìm thấy thứ nào được liệt kê trong thuộc tính này trên máy tính của anh ta, thì phần tử này sẽ được hiển thị bằng phông chữ mà người dùng này đã chọn theo mặc định cho họ sans-serif (sans serif hay nói cách khác là được cắt nhỏ). Ngoài ra còn có các họ Serif (serif) và monospace (monospace), mà bạn cũng có thể sử dụng trong họ Phông chữ để biểu thị loại.

Tại sao tôi lại giải thích?! Rốt cuộc, tất cả điều này lặp lại chính xác nhiệm vụ, hiện được coi là không được khuyến nghị (không hợp lệ) và đã được thay thế bằng thuộc tính Phông chữ CSS.

Nhân tiện, người ta cũng viết rằng có vấn đề khi sử dụng hoàn toàn bất kỳ phông chữ nào trên trang web, bởi vì chúng phải được cài đặt trên máy tính của người dùng. Người ta tin rằng với khả năng cao là chỉ có khoảng một tá sẽ được cài đặt trên máy tính của người dùng (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), có nghĩa là bạn có thể sử dụng chúng một cách an toàn trong các quy tắc với Font-family.

Nhưng Google () đã đưa ra một cách khá thú vị để thoát khỏi tình huống này. Điểm mấu chốt là trình duyệt sẽ tìm kiếm những chiếc tai nghe đẹp mắt này (không nằm trong top 10 loại phổ biến nhất) không phải trên máy tính của người dùng mà trên các máy chủ của Google, như bạn biết, máy chủ này hoạt động rất ổn định và hiệu suất cao.

Nhưng hãy quay lại cú pháp thuộc tính CSS của chúng ta. Tôi đã đề cập rằng có một tính năng nhỏ ở đây. Nếu tên của kiểu chữ (mà bạn muốn sử dụng trên trang web) chứa ký tự khoảng trắng, thì cái tên này chắc chắn sẽ cần thiết đặt trong dấu ngoặc kép.

Tên phông chữ không chứa dấu cách trong họ Phông chữ không cần đặt trong dấu ngoặc kép:

Font-size - đặt kích thước phông chữ trong CSS

Thuộc tính Font-size sau đây được sử dụng để đặt kích thước phông chữ cho bất kỳ phần tử nào trong Mã HTML. Nó có những đặc điểm riêng của nó. Kích thước có thể được chỉ định theo cả đơn vị tuyệt đối và tương đối:

Thuộc tính font-weight, line-height và font-style

"Độ dày phông chữ" trong Css cho phép bạn đặt kiểu phông chữ bình thường hoặc đậm cho phần tử mà thuộc tính này được đề cập tới. Nhưng trên thực tế nó có thể có những ý nghĩa khác. Chỉ có bốn chữ cái cộng với thang đo kỹ thuật số:

1. Đối với “độ dày phông chữ”, bạn có thể sử dụng các giá trị sau: bình thường, đậm, đậm hơn (đậm hơn một chút) hoặc nhạt hơn (mỏng hơn một chút). Hơn nữa, các giá trị duy nhất thực sự hoạt động trong tất cả các trình duyệt là giá trị bình thường (nhạt hơn cũng sẽ chuyển sang giá trị này) và đậm (đậm hơn cũng sẽ chỉ cung cấp phong cách táo bạo).

Hoặc các giá trị kỹ thuật số từ 100 đến 900 với gia số 100 (từ siêu mịn đến siêu đậm). Những thứ kia. ở thang đo này, một phông chữ có thể sử dụng nhiều kiểu với mức độ đậm nhạt khác nhau. Ban đầu, giá trị bình thường là 400 và giá trị in đậm là 700.

Nhưng trên thực tế, cho đến nay vẫn chưa có trình duyệt nào dành cho “Font-weight” hỗ trợ đầy đủ điều này. Thật đáng tiếc, đôi khi bạn muốn sử dụng phông chữ đậm hơn một chút hoặc mỏng hơn một chút so với những gì các giá trị “bình thường” và “đậm” có thể mang lại cho chúng ta. Than ôi và à, bây giờ tất cả các số dưới 400 sẽ cho bạn số bình thường, còn bất cứ số nào nhiều hơn sẽ cho bạn số đậm.

Nhân tiện, trong một trong những bài viết trước, chúng ta đã xem xét những thứ như kiểu Css mặc định để thiết kế các thành phần trong mã Html, nếu không có gì được chỉ định cho các thành phần này trong tệp biểu định kiểu xếp tầng. Vì vậy, ví dụ, đối với các tiêu đề H1-H6 và các thẻ in đậm logic và vật lý (mạnh và B), kiểu đậm nhạt của phông chữ có giá trị in đậm hơn được xác định:

Những thứ kia. Các nhà phát triển tiêu chuẩn ngôn ngữ đánh dấu kiểu cho rằng điều này sẽ hoạt động và được các trình duyệt hỗ trợ đầy đủ, nhưng cho đến nay "Font-weight: đậm hơn" được hầu hết các trình duyệt hiểu là "đậm" và không có gì hơn thế. Theo mặc định, thuộc tính "độ dày phông chữ" được đặt thành "bình thường"(bạn có thể thấy điều này đối với bất kỳ thuộc tính nào trong thông số kỹ thuật ở cột “Giá trị ban đầu”).

Quy tắc tiếp theo mà chúng tôi đưa ra và cho phép bạn đặt thiết kế phông chữ cho các thành phần Html hiện có của mình là “Line-height”, có nghĩa là chiều cao của dòng. Mục đích của quy tắc này là di chuyển các dòng văn bản trên một trang web ra xa nhau về chiều cao, vì các dòng dính vào nhau sẽ không thể đọc được. Trong in ấn, điều này được gọi là xen kẽ.

Bằng cách sử dụng "Chiều cao giữa các dòng" Bạn có thể thêm hoặc giảm khoảng trắng bên trên và bên dưới một dòng văn bản, do đó thay đổi toàn bộ chiều cao của dòng văn bản:

Khoảng cách từ văn bản (kích thước của nó được đặt thông qua “cỡ chữ”) được bố trí đối xứng (lên và xuống cùng một lúc). Theo mặc định, thuộc tính Css “chiều cao dòng” cho tất cả các phần tử Html có văn bản sẽ có giá trị Bình thường (bạn có thể thấy điều này cho bất kỳ thuộc tính nào trong đặc tả trong cột “Giá trị ban đầu”). phụ thuộc vào loại phông chữ được sử dụng và được trình duyệt tự động tính toán.

Ví dụ: đối với Arial, chiều cao của dòng là khoảng 120%, tức là. Kích thước dọc của toàn bộ dòng (các chữ cái cộng với khoảng trống ở trên và dưới nó) sẽ lớn hơn 120% so với chiều cao của phông chữ. Và đối với Times New Roman, giá trị mặc định của thuộc tính này sẽ vào khoảng 125%.

Để tăng hoặc giảm khoảng cách giữa các dòng văn bản, bạn có thể sử dụng các giá trị tương đối cho “Line-height” dưới dạng phần trăm hoặc “Em”. Ví dụ: để có các dòng thưa thớt (tăng chiều cao của dòng), bạn có thể viết:

Chiều cao dòng: 300%; hoặc chiều cao dòng: 3em;

Và nếu bạn viết nó như thế này:

Chiều cao dòng: 30%; hoặc chiều cao dòng: 0,3em;

khi đó chiều cao của dòng sẽ nhỏ hơn chiều cao của phông chữ (cỡ chữ) và các dòng văn bản sẽ chạy chồng lên nhau.

Bạn cũng có thể sử dụng bất kỳ giá trị nào cho “Line-height” giá trị tuyệt đối, thường được sử dụng cho các phông chữ trong biểu định kiểu xếp tầng - pixel (px), inch (in), điểm (pt). Hoặc bạn có thể sử dụng yếu tố không thứ nguyên(bất kỳ số nào lớn hơn 0). Ví dụ: để đặt khoảng cách một rưỡi giữa các dòng, bạn có thể viết dòng này:

Chiều cao dòng: 1,5;

Thuộc tính Css tiếp theo là "kiểu phông chữ", bạn có thể sử dụng nó để đặt phông chữ in nghiêng. Theo đặc điểm kỹ thuật, có ba tùy chọn cho các giá trị: bình thường, in nghiêng và xiên. Nhưng trong thực tế chỉ có hai cái đầu tiên được sử dụng. Hơn nữa, giá trị “bình thường” là giá trị mặc định.

Khi bạn đặt giá trị font-style:italic cho bất kỳ thành phần nào của mã HTML, trình duyệt sẽ tìm kiểu chữ mong muốn được đánh dấu là “in nghiêng” (tức là kiểu in nghiêng). Nếu bạn đi tới “phông chữ” thông qua bảng điều khiển trên máy tính của mình, bạn sẽ thấy rằng nhiều phông chữ trong số đó có tùy chọn “nghiêng” hoặc “nghiêng” trong tên.

Nhưng có những phông chữ (ví dụ: Tahoma nổi tiếng) mà các nhà phát triển không cung cấp kiểu in nghiêng. Trình duyệt sẽ làm gì trong trường hợp này (nếu bạn chỉ định chữ nghiêng trong kiểu phông chữ)? Và anh ấy sẽ là chính mình hãy thử nghiêng các chữ cái của phông chữ này, vì các nhà phát triển của nó đã không quan tâm đến vấn đề này trước. Tất nhiên nó sẽ trông tệ hơn.

Chà, giá trị xiên cho kiểu phông chữ sẽ buộc trình duyệt luôn in nghiêng phông chữ bằng các phương tiện riêng của nó, ngay cả khi nó có kiểu in nghiêng. Nó thường trông đơn giản là khủng khiếp, vì vậy giá trị "xiên" thực tế không được sử dụng.

Chà, thuộc tính cuối cùng của biểu định kiểu xếp tầng được thảo luận hôm nay là biến thể phông chữ, rất hiếm khi được sử dụng trong .

Theo mặc định, trong phông chữ, kiểu chữ thường khác với chữ in hoa không chỉ ở kích thước mà còn ở hình thức của chính các chữ cái. Và đây "biến thể phông chữ" cho phép, mà không thay đổi kích thước của chữ thường, làm cho kiểu dáng của chúng giống hệt với kiểu chữ in hoa.

Theo đó, thuộc tính này chỉ có 2 giá trị là normal (mặc định) và small-caps (kiểu chữ thường sẽ giống như chữ in hoa). Đối với tiếng Nga, thuộc tính này cực kỳ hiếm khi được sử dụng.

Phông chữ - quy tắc đúc sẵn trong ngôn ngữ kiểu CSS

Quy tắc tạo sẵn về Phông chữ, giống như những quy tắc khác giống như vậy trong ngôn ngữ CSS, cho phép bạn chỉ định trong đó các giá trị của các thuộc tính cơ bản riêng lẻ được phân tách bằng dấu cách.

Trong hầu hết các trường hợp, thứ tự của các giá trị thuộc tính trong quy tắc prefab không quan trọng, nhưng trong Font thì không như vậy. Đây Thứ tự của các giá trị là quan trọng và nó phải chính xác như được hiển thị trong ảnh chụp màn hình ở trên (nhân tiện, ).

Những thứ kia. bạn sẽ cần phải viết một cái gì đó như thế này:

Phông chữ: in nghiêng chữ hoa nhỏ in đậm 12px/12px verdana;

Nhưng thực tế, trong đội quy tắc CSS Chỉ cần hai phông chữ giá trị mới nhất(họ phông chữ và cỡ chữ, thậm chí không chỉ định giá trị chiều cao dòng thông qua dấu gạch chéo). Sau đó, trình duyệt sẽ sử dụng những giá trị nào cho các thuộc tính không được chỉ định trong đó? Chà, rõ ràng là các giá trị mặc định được chấp nhận cho chúng (bạn có thể thấy điều này đối với bất kỳ thuộc tính nào trong thông số kỹ thuật ở cột “Giá trị ban đầu”).

Bạn có biết tại sao cần phải chỉ ra các giá trị cho “font-family” và “font-size” trong quy tắc kết hợp này không? Có, bởi vì chúng không có các giá trị mặc định như vậy (vì chúng được lấy từ cài đặt trình duyệt của người dùng, như chúng ta đã tìm hiểu ở phần cao hơn một chút trong văn bản). Vì vậy, nếu bạn không muốn ghi đè kiểu chữ hoặc cỡ chữ, thì không nên sử dụng quy tắc tạo sẵn Phông chữ(tốt hơn là sử dụng những cái riêng biệt).

Cái đó. nó chủ yếu được sử dụng cho các thẻ Html hoặc Body và cho các phần tử bên trong mà kiểu chữ và kích thước phông chữ sẽ phải được kế thừa, các phần tử riêng biệt thường được sử dụng nhiều nhất Thuộc tính CSS(cỡ chữ, cỡ chữ, kiểu dáng).

Nếu bạn sử dụng quy tắc ghép này cho các phần tử bên trong, bạn sẽ phải chỉ định kiểu chữ và kích thước. Nếu sau này bạn muốn thay đổi chúng thì sao? Cái gì, bạn định xem qua tất cả các quy tắc Phông chữ tổng hợp trong mã phải không? Nó không thoải mái. Đó là lý do tại sao nó chủ yếu chỉ được sử dụng cho các thùng chứa bên ngoài. Nhưng đây là như vậy, những suy nghĩ về chủ đề này.

Thông thường, quy tắc ghép Phông chữ được viết mà không có nhiều thuộc tính hiếm khi được sử dụng ngoài các thuộc tính mặc định:

Phông chữ:bold 4em/3em arial, "comic sans ms", sans-serif;

Những thứ kia. Ở đây bạn đặt kiểu đậm, kích thước, chiều cao dòng và kiểu chữ. Vâng, hoặc thậm chí đơn giản hơn:

Phông chữ: 10px arial, sans-serif;

Đây là hình thức viết tối thiểu có thể có, trong đó chỉ có các thuộc tính bắt buộc là “font-family” và “font-size”. Tất cả những thứ khác sẽ được trình duyệt sử dụng với giá trị mặc định (bình thường). Cú pháp quy tắc tiền chế Phông chữ được mô tả ở trên được lấy từ đặc tả:

Chúc bạn may mắn! Hẹn gặp lại bạn sớm trên các trang của trang blog

Bạn có thể xem thêm video bằng cách vào

Bạn có thể quan tâm

Thuộc tính CSS text-trang trí, căn chỉnh dọc, căn chỉnh văn bản, thụt lề văn bản để trang trí văn bản trong Html
Bộ chọn các lớp giả và phần tử giả trong CSS (di chuột, con đầu tiên, dòng đầu tiên và các phần tử khác), mối quan hệ giữa Thẻ HTML mã số
CSS dùng để làm gì, làm thế nào để kết nối các biểu định kiểu xếp tầng với tài liệu HTML và cú pháp cơ bản của ngôn ngữ này
Kiểu danh sách(loại, hình ảnh, vị trí) - Quy tắc CSS cho cài đặt vẻ bề ngoài danh sách trong mã HTML
Đơn vị thứ nguyên (pixel, Em và Ex) và quy tắc kế thừa trong CSS

Tuần trước, khi tôi đã nói ngắn gọn về kích thước pixel trong CSS, tôi đã quyết định xem xét các cách khác nhau để đặt kích thước phông chữ trong CSS.

Giới thiệu về đơn vị đo lường

Có một vài theo nhiều cách khác nhau, bạn có thể sử dụng để khai báo kích thước phông chữ trong CSS. Nói chung, tất cả các đơn vị đo lường thuộc một trong hai loại - tuyệt đối và tương đối.

Đơn vị tuyệt đối là cố định và (hầu hết) liên quan đến một số chiều vật lý. Khi chúng được khai báo, kích thước của chúng không thể thay đổi bằng cách thay đổi kích thước phông chữ của bất kỳ phần tử nào khác.

Đơn vị tương đối không có thước đo khách quan. Thay vào đó, kích thước thực tế của chúng được xác định bởi kích thước của phần tử cha. Điều này có nghĩa là chúng có thể được thay đổi kích thước bằng cách thay đổi kích thước phần tử cha.

Đây Mô tả ngắn một số đơn vị đo:

Ví dụ 3 - rem vs em (và %)

Kích thước phông chữ tính bằng em (và %) được tính tương ứng với kích thước phông chữ của phần tử gốc. Ví dụ:

Html ( font-size: 100% /* =16px */ ) body ( font-size: 2em; /* =32px */ ) p ( font-size: 1em; /* =32px */ /* font-size: 0,5em;=16px */ )

Vì kích thước phông chữ của phần tử p được kế thừa từ phần nội dung và phần nội dung được kế thừa từ html, nên kích thước phông chữ của phần tử p lớn gấp đôi so với những gì chúng ta mong đợi.

Khi sử dụng đơn vị em, bạn phải tính đến kích thước phông chữ của tất cả các phần tử gốc. Như bạn có thể thấy, điều này có thể trở nên phức tạp khá nhanh chóng.

Giải pháp cho vấn đề này là rem. Đơn vị rem chỉ được tính dựa trên kích thước phông chữ của phần tử html chứ không phải phần tử gốc. Ví dụ:

Html ( font-size: 100% /* =16px */ ) body ( font-size: 2rem; /* =32px */ ) p ( font-size: 1rem; /* =16px */ )

Việc sử dụng rem cho phép bạn có khả năng mở rộng tương tự như với em và % nhưng không gặp phải vấn đề lồng nhau.

Ví dụ 4 - Đơn vị dựa trên chiều rộng khung nhìn

đơn vị vw, đơn vị CSS3 mới , được tính dựa trên chiều rộng của khung nhìn. Điều này cho phép bạn đặt kích thước phông chữ phản hồi nhanh hơn.

Và mặc dù đây có vẻ là một đơn vị đo lường tuyệt vời cho thiết kế thích ứng, Cá nhân tôi không phải là fan của cô ấy. Nó không cho tôi đủ quyền kiểm soát để đặt kích thước phông chữ, hầu như luôn dẫn đến kết quả là quá lớn hoặc quá nhỏ.

Cách của tôi

Trước khi thực hiện nghiên cứu này, tôi chỉ đặt kích thước phông chữ bằng pixel. Ngày nay, hầu hết các trình duyệt đều cho phép người dùng tăng kích thước phông chữ nên khả năng truy cập không phải là vấn đề.

Tuy nhiên, tôi thấy phương pháp này khá hạn chế về khả năng mở rộng quy mô. Mặc dù kích thước phông chữ của tôi trông đẹp trên màn hình vừa và nhỏ nhưng chúng có thể được tối ưu hóa cho màn hình lớn hơn. Ngay cả khi người dùng có tùy chọn tăng kích thước phông chữ, đây không phải là điều họ nên làm.

Cách của tôi là sử dụng rem (và pixel làm dự phòng).

Html ( font-size: 62.5%; /* đặt phông chữ cơ sở thành 10px để làm toán dễ dàng hơn */ ) body ( font-size: 16px; font-size: 1.6rem; /* đặt kích thước mặc định để đảm bảo không có gì thực sự là 10px */ ) h1 ( cỡ chữ: 32px; cỡ chữ: 3.2rem; )

Điều này cho phép tôi tăng kích thước phông chữ bằng cách viết:

@media screen và (min-width: 1280px) ( html ( font-size: 100%; ) )

Phương pháp này sử dụng pixel làm đơn vị dự phòng vì rem không được hỗ trợ trong IE8 trở xuống. Vấn đề với giải pháp này là việc chia tỷ lệ bằng cách thay đổi kích thước phông chữ của phần tử gốc không ảnh hưởng đến kích thước dự phòng. Tuy nhiên, tôi không nghĩ đây là một vấn đề lớn vì khả năng mở rộng quy mô cho các thiết bị lớn hơn là một tính năng tùy chọn.

Nếu bạn có bất kỳ ý tưởng nào về cách tôi có thể cải thiện phương pháp này, vui lòng cho tôi biết. Tôi cũng muốn viết một mixin SCSS để không phải viết cỡ chữ ở cả pixel và rem mỗi lần.

Kích thước phông chữ trên trang web có thể được đặt như sau: Trợ giúp về HTML và sử dụng CSS. Hãy xem xét cả hai lựa chọn.

Đặt kích thước phông chữ bằng HTML

Kích thước phông chữ trên trang có thể được xác định bằng thẻ nét chữ HTML. Trong bài viết chúng tôi đã xem xét thẻ nét chữ và các thuộc tính của nó. Một trong những thuộc tính của thẻ này là kích cỡ, cho phép bạn đặt kích thước phông chữ. Nó được áp dụng như sau:

Người tạo ra trang web "Nubex"

Kích cỡ có thể lấy các giá trị từ 1 đến 7 (mặc định là 3, tương ứng với 13,5 điểm cho phông chữ Times New Roman). Một tùy chọn khác để chỉ định thuộc tính là “+1” hoặc “-1”. Điều này có nghĩa là kích thước sẽ được thay đổi so với cơ sở tương ứng ít hơn 1 điểm.

Phương pháp này khá dễ sử dụng và không thể thiếu nếu bạn cần thay đổi cỡ chữ của một đoạn văn bản nhỏ. Nếu không, bạn nên tạo kiểu cho văn bản bằng CSS.

Đặt kích thước phông chữ bằng CSS

Trong CSS, bạn có thể thay đổi kích thước phông chữ bằng cách sử dụng thuộc tính cỡ chữ, được áp dụng như sau:

Trong ví dụ bên dưới, kích thước phông chữ được đặt bằng pixel. Nhưng có nhiều cách khác để đặt kích thước:

• lớn, nhỏ, vừa- đặt kích thước tuyệt đối (nhỏ, trung bình, lớn). Các giá trị cực nhỏ (x-small, xx-small), cực lớn (x-large, xx-large) cũng có thể được sử dụng.
• lớn hơn, nhỏ hơn- đặt kích thước tương đối (nhỏ hơn hoặc lớn hơn so với phần tử gốc).
• 100% - kích thước tương đối được đặt (dưới dạng phần trăm so với cha mẹ). Ví dụ: h1 ( font-size: 180%; ) Điều này có nghĩa là kích thước của thẻ H1 sẽ là 180% kích thước cơ sở nét chữ.
• Các tùy chọn khác để đặt kích thước tương đối:
  • 5ex- có nghĩa là kích thước sẽ có chiều cao 5 chữ cái x từ phông chữ cơ sở;
  • 14 điểm- 14 điểm;
  • 22px- 22 pixel;
  • 1vw- 1% chiều rộng cửa sổ trình duyệt;
  • 1vh- 1% chiều cao cửa sổ trình duyệt;