Cài đặt phông chữ trong css. Kết nối phông chữ CSS. Làm việc với phông chữ web. Phông chữ của Google
Kết nối font chữ mới với website không phải là tốt nhất nhiệm vụ đơn giản. Nơi để lựa chọn, tải về và cách thêm phông chữ vào trang web bằng CSS? Trong bài viết này chúng tôi sẽ hiển thị một trong thuận tiện nhất cách cài đặt và kết nối phông chữ với trang web.
Cách đưa phông chữ vào trang web trong CSS
Ví dụ: chúng tôi có một phông chữ Raleway.ttf và chúng tôi muốn sử dụng nó trong tất cả các tiêu đề ( h1) của trang web của chúng tôi. Để thực hiện việc này, hãy thực hiện các bước sau:
h1 ( họ phông chữ: "RalewayThông thường"; }
Bây giờ tất cả các tiêu đề cấp 1 trên trang web đều được hiển thị bằng phông chữ mà chúng tôi cần.
Nếu bạn muốn kết nối nhiều phông chữ (hoặc kiểu của chúng), thì chỉ cần thêm chúng vào phông chữ trước đó:
@mặt chữ { họ phông chữ: "RalewayThông thường"; src: url("../fonts/RalewayRegular.ttf" )định dạng( "đúng kiểu"); kiểu chữ: bình thường; độ dày phông chữ: bình thường; } @mặt chữ{ họ phông chữ: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" )định dạng( "đúng kiểu"); kiểu chữ: bình thường; độ dày phông chữ: bình thường; }
Bạn có thể nhận thấy rằng có nhiều định dạng phông chữ khác nhau - .ttf, .woff, .eot, .svg v.v. Ngoài ra còn có một định dạng cho các trình duyệt hiện đại. woff2, nhưng chúng ta sẽ nói về nó ở một trong những bài viết tiếp theo. Thông thường, mỗi phông chữ được kết nối ở 3 định dạng cùng một lúc. Điều này được thực hiện để phông chữ được hiển thị chính xác trong tất cả các trình duyệt, bao gồm cả. và những cái cũ. Nó trông như thế này:
@mặt chữ { họ phông chữ: "RalewayThông thường"; src: địa chỉ ( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: địa chỉ ( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") định dạng ("embedded-opentype"), địa chỉ ( "../fonts/RalewayRegular/RalewayRegular.woff") định dạng( "ôi"), địa chỉ ( "../fonts/RalewayRegular/RalewayRegular.ttf") định dạng( "đúng kiểu"); kiểu chữ: bình thường; độ dày phông chữ: bình thường; }
Sau đây Hãy chú ý đến thứ tự kết nối - điều này rất quan trọng!
Chúng ta sẽ không đi vào chi tiết mà chỉ nhớ về hình thức bên ngoài của thiết kế này.
Nếu bạn chỉ có một phông chữ ở một định dạng thì hãy sử dụng các trình chuyển đổi phông chữ khác nhau. Đây là một trong số chúng.
Cách kết nối phông chữ bằng nhiều dịch vụ khác nhau
Bạn cũng có thể sử dụng dịch vụ font4web để kết nối phông chữ: 
Cách dễ nhất để kết nối phông chữ
Cách kết nối phông chữ với mẫu Moguta CMS 
Cách thêm liên kết có phông chữ Google vào mẫu Moguta CMS
Bây giờ bạn đã biết cách thêm phông chữ vào trang web bằng CSS và hơn thế nữa. Chúng tôi sẽ sẵn lòng trả lời tất cả các câu hỏi của bạn Phông chữ CSS- một tập hợp các thuộc tính để quản lý vẻ bề ngoài văn bản của các trang web. Bằng cách sử dụng các phông chữ khác nhau cho tiêu đề, đoạn văn và các thành phần khác, bạn có thể đặt kiểu cụ thể cho tin nhắn bằng văn bản, truyền tải cảm xúc và tâm trạng mong muốn.
Khi tìm hiểu về nhiều loại phông chữ, đừng quên rằng văn bản nội dung chính của trang web trước hết phải dễ đọc. Không nên sử dụng nhiều hơn hai phông chữ trên một trang và có thể đạt được độ tương phản mong muốn bằng cách kết hợp các phông chữ có độ dày, kích thước, kiểu dáng hoặc màu sắc khác nhau.
Bạn có thể tìm hiểu thêm về các quy tắc trong bài viết sau.
Định dạng phông chữ bằng thuộc tính CSS
1. Họ phông chữ
Thuộc tính được sử dụng để chọn kiểu phông chữ. Vì không thể dự đoán liệu một phông chữ cụ thể có được cài đặt trên máy tính của khách truy cập vào trang web của bạn hay không nên bạn nên đăng ký tất cả những lựa chọn khả thi phông chữ cùng loại. Trong trường hợp này, trình duyệt sẽ kiểm tra sự hiện diện của chúng, tuần tự đi qua các tùy chọn được đề xuất. Thừa hưởng.
Quan trọng! Nếu tên phông chữ chứa dấu cách hoặc ký hiệu (ví dụ: #, $, %), thì nó được đặt trong dấu ngoặc kép. Điều này được thực hiện để trình duyệt có thể hiểu tên phông chữ bắt đầu và kết thúc ở đâu.
| họ phông chữ | |
|---|---|
| Giá trị: | |
| tên gia đình | Tên của họ phông chữ, ví dụ: Times, Courier, Arial. Nên chỉ định cùng với họ cơ sở. |
| gia đình chung | Gia đình cơ bản. CSS định nghĩa năm họ phông chữ cơ bản: Phông chữ Serif - Serif (Time New Roman, Times, Garamond, Georgia) Phông chữ Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Phông chữ đơn cách - Monospace (Courier, Courier New, Andele Mono) Phông chữ viết tay - Chữ thảo (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Phông chữ ngụ ngôn (Western, Woodblock, Klingon) |
| ban đầu | |
| thừa kế | |
Cú pháp
P (họ phông chữ: "Time New Roman", Georgia, Serif;)
2. Kiểu chữ kiểu phông chữ
Thuộc tính cho phép bạn chọn kiểu phông chữ cho văn bản. Như đã nói, sự khác biệt giữa văn bản in nghiêng và văn bản in nghiêng là văn bản in nghiêng tạo ra những thay đổi nhỏ đối với cấu trúc của mỗi chữ cái, trong khi văn bản in nghiêng là phiên bản nghiêng của văn bản thẳng. Thừa hưởng.
Cú pháp
H1 (kiểu phông chữ: bình thường;) h1 (kiểu phông chữ: in nghiêng;) h1 (kiểu phông chữ: xiên;) Hình. 1. Thuộc tính kiểu phông chữ
3. Tùy chọn kiểu phông chữ biến thể phông chữ
Thuộc tính cho phép bạn hiển thị cỡ chữ nhỏ bằng chữ in hoa. Thừa hưởng.
Cú pháp
H1 (biến thể phông chữ: bình thường;) h1 (biến thể phông chữ: chữ hoa nhỏ;) Hình. 2. Thuộc tính biến thể phông chữ
4. Độ dày phông chữ
Thuộc tính chỉ định trọng lượng phông chữ.
| Giá trị: | |
| Bình thường | Giá trị mặc định đặt trọng lượng phông chữ thành bình thường. Tương đương với giá trị bão hòa là 400. |
| in đậm | Làm đậm phông chữ văn bản. Tương đương với giá trị bão hòa là 700. |
| bạo dạn hơn | Trọng lượng phông chữ sẽ lớn hơn so với tổ tiên. |
| nhẹ hơn | Trọng lượng phông chữ sẽ nhỏ hơn so với tổ tiên. |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Giá trị 100 tương ứng với nhiều nhất lựa chọn dễ dàng kiểu phông chữ và 900 là kiểu chữ dày nhất. Hơn nữa, những con số này không xác định mật độ cụ thể, tức là 100, 200, 300 và 400 có thể tương ứng với cùng một biến thể về độ dày phông chữ yếu; 500 và 600 có trọng lượng trung bình, còn 700, 800 và 900 có thể thể hiện cùng một phong cách rất phong phú. Sự phân bổ mật độ cũng phụ thuộc vào số lượng mức độ đậm nhạt được xác định trong một họ phông chữ cụ thể. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cú pháp
H1 (font-weight: normal;) span (font-weight: đậm;) span (font-weight: đậm hơn;) span (font-weight: light;) h1 (font-weight: 100;) 
Cơm. 3. Thuộc tính font-weight
5. Cỡ chữ cỡ chữ
Thuộc tính xác định kích thước (điểm) của phông chữ.
| cỡ chữ | |
|---|---|
| Giá trị: | |
| kích thước tuyệt đối | xx-nhỏ, x-nhỏ, nhỏ, vừa, lớn, x-lớn, xx-lớn. Các kích thước tuyệt đối được xác định tương đối với nhau và hệ số tỷ lệ giữa hai kích thước tuyệt đối liền kề là khoảng 1,5 từ nhỏ đến lớn và 0,66 từ lớn đến nhỏ. BẰNG kích thước tiêu chuẩn trung gian được chấp nhận. |
| kích thước tương đối | nhỏ hơn, lớn hơn. Định cỡ tương đối làm cho kích thước phông chữ của phần tử thay đổi so với phần tử gốc của nó. Trong trường hợp này, kích thước phông chữ có thể vượt quá kích thước dự kiến cho xx-small và xx-large . |
| chiều dài | Cỡ chữ được đặt bằng đơn vị độ dài dương - px, cả số nguyên và phân số. |
| % | Giá trị tương đối, được tính toán dựa trên bất kỳ kích thước nào được kế thừa từ phần tử gốc. Cung cấp nhiều hơn tinh chỉnh cỡ chữ được tính toán. Đặt kích thước phông chữ bằng em tương đương với giá trị phần trăm. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cú pháp
H3 (cỡ chữ: nhỏ;) h1 (cỡ chữ: xx-large;), em (cỡ chữ: lớn;) p (cỡ chữ: 20px;) h3 (cỡ chữ: 120%;)
6. Màu chữ
Thuộc tính đặt màu phông chữ bằng cách sử dụng hệ thống khác nhau sự thể hiện màu sắc. Tài sản được thừa kế.
| màu sắc | |
|---|---|
| Giá trị: | |
| HEX | Hệ thống này sử dụng số thập phân Ả Rập từ 0 đến 9 và bức thư từ A đến F. Đối với thiết kế web, 16 màu cơ bản được lấy, gọi là mã thập lục phân màu sắc #RRGGBB, trong đó mỗi cặp chịu trách nhiệm về tỷ lệ màu sắc của nó: RR – đỏ, GG – xanh lá cây và BB – xanh lam. Mỗi phần màu nằm trong khoảng từ 00 đến FF. |
| RGB | Đỏ lục lam, biểu thị lượng tông màu tương ứng (đỏ, lục, lam) trong màu thu được. |
| RGBA | Hệ màu RGB mở rộng theo tham số Alpha, được sử dụng để kiểm soát việc trộn màu. Giá trị này được hỗ trợ bởi IE9+, Firefox 3+, Chrome, Safari và trong Opera 10+. Số cuối cùng xác định mức độ trong suốt, được đặt bằng giá trị từ 0 đến 1, trong đó 0 tương ứng với độ trong suốt hoàn toàn và 1 tương ứng với độ mờ. |
| HSL | Hue, Saturation, Lightness (Cường độ)- màu sắc (tông màu), độ bão hòa, độ sáng, mô hình màu những mô tả về màu sắc. Giá trị đầu tiên là bóng râm- được xác định bằng mức độ quay của phổ màu theo chiều kim đồng hồ từ 0° đến 360°, trong đó 60° là màu vàng, 120° là màu xanh lá cây, 180° là màu lục lam, 240° là màu xanh lam, 300° là màu tím. Giá trị thứ hai xác định bão hòa bóng đã chọn và được biểu thị dưới dạng phần trăm nằm trong khoảng từ 0% đến 100%. Gần gũi hơn giá trị đã chođến 100% thì màu sắc càng tinh khiết và phong phú. Độ nhẹ hoặc độ sángđược biểu thị bằng phần trăm; phần trăm càng cao thì màu càng sáng. Các giá trị 0% và 100% lần lượt biểu thị màu đen (không có ánh sáng) và màu trắng (phơi sáng quá mức), bất kể sắc thái nào của bánh xe màu ban đầu đã được chọn. Giá trị tối ưuđộ sáng màu là 50%. Giá trị được hỗ trợ bởi IE9+, Firefox, Chrome, Safari, Opera 10+ |
| HSLA | Đặt độ trong suốt (thông qua kênh Alpha) của phần tử. Màu sắc (0 đến 360), Độ bão hòa (0% đến 100%), Độ sáng (0% đến 100%), Độ trong suốt (0 đến 1). Giá trị được hỗ trợ IE9+, Firefox 3+, Chrome, Safari và trong Opera 10+. |
| tên màu | Giá trị màu được chỉ định bởi tên trình duyệt chéo. TRONG Hiện nay tồn tại |
Vlad Merzhevich
Phông chữ là một phần không thể thiếu trong thiết kế web, nó mang lại tính biểu cảm và nhận diện cho trang web, thể hiện phong cách đặc trưng trang web và có liên quan trực tiếp đến nhận thức về văn bản. Một phông chữ được lựa chọn tốt có thể không được chú ý, nhưng nếu không có nó thì sẽ không có sự thú vị mang lại sự hoàn chỉnh cho thiết kế trang web.
Nếu bạn đã cài đặt một phông chữ cụ thể trên máy tính của mình thì chỉ cần thêm một dòng vào tệp style.
h1 (họ phông chữ: SuperPuperFont; )
Giá trị của thuộc tính font-family là tên của họ phông chữ, nó sẽ được áp dụng cho tất cả các tiêu đề;
. Nhưng khách truy cập trang web sẽ thấy gì nếu phông chữ đẹp mắt và hiếm có của chúng tôi không được cài đặt? Tình trạng tương tự rất có thể nên nếu trình duyệt không nhận diện được font đã khai báo thì sẽ sử dụng font mặc định, ví dụ trên Windows đây là Times New Roman. Tất cả các thiết kế kiểu chữ được suy nghĩ cẩn thận của chúng tôi sẽ vỡ vụn và tan thành cát bụi chỉ sau một đêm, vì vậy chúng tôi cần phải tìm kiếm nhiều nhất giải pháp phổ quát. Điều đầu tiên bạn nghĩ ngay đến là sắp xếp để tải tệp phông chữ xuống máy tính của người dùng và văn bản sẽ hiển thị theo phông chữ đã chọn. So với các phương pháp khác như hiển thị văn bản qua hình ảnh, phương pháp này đơn giản và linh hoạt nhất.
Việc tải một tệp phông chữ và sau đó áp dụng qua CSS cuối cùng mang lại cho chúng ta những lợi ích gì?
- Văn bản rất dễ dàng để thêm và chỉnh sửa.
- Trong trình duyệt, bạn có thể sử dụng tìm kiếm và tìm các cụm từ mong muốn.
- Trong cài đặt trình duyệt, bạn có thể giảm hoặc tăng kích thước phông chữ để có được trải nghiệm xem thoải mái.
- Công cụ tìm kiếm Họ lập chỉ mục nội dung tài liệu tốt.
- Văn bản có thể được chọn và sao chép vào khay nhớ tạm cũng như dịch sang ngôn ngữ khác.
- Tùy chọn văn bản như khoảng cách dòng, màu sắc, kích thước và những thứ tương tự có thể dễ dàng thay đổi bằng cách sử dụng thuộc tính CSS.
- Một lần nữa, bằng cách sử dụng CSS, bạn có thể chỉ cần thêm các hiệu ứng khác nhau vào văn bản, chẳng hạn như bóng.
Như bạn có thể thấy, có rất nhiều lợi thế. Ngoài ra còn có những nhược điểm nhỏ và để cân bằng thì chúng đáng được đề cập.
- Không phải tất cả các phiên bản trình duyệt đều hỗ trợ phông chữ có thể tải xuống và các định dạng phù hợp với tất cả.
- Một tập tin chứa một kiểu chữ phông chữ có thể chiếm khối lượng lớn, do đó làm chậm quá trình tải trang web.
Trong bảng 1 liệt kê các phiên bản trình duyệt và định dạng phông chữ mà chúng hỗ trợ.
| Định dạng | trình duyệt web IE | Trình duyệt Chrome | Opera | Cuộc đi săn | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Định dạng được hỗ trợ nhiều nhất là TTF. Ngoại trừ IE cho đến phiên bản 9.0 và iOS, tất cả các trình duyệt đều hiểu nó một cách hoàn hảo. Vì vậy, nếu bạn có phông chữ ở định dạng này và bạn đang tập trung vào trình duyệt hiện đại, KHÔNG hành động bổ sung bạn sẽ không phải làm điều đó. Chỉ cần viết đoạn mã sau theo kiểu là đủ (ví dụ 1).
Ví dụ 1: Kết nối TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Đầu tiên, chúng ta tải chính tệp phông chữ bằng quy tắc @font-face. Bên trong nó chúng ta viết tên của kiểu chữ thông qua tham số font-family và đường dẫn đến tệp thông qua src . Sau đó chúng ta sử dụng font chữ như bình thường. Vì vậy, nếu chúng ta cần đặt phông chữ tiêu đề, thì đối với bộ chọn h1, như trong ví dụ, chúng ta đặt thuộc tính font-family với tên của phông chữ được tải. Đối với các phiên bản IE cũ hơn, chúng tôi liệt kê các tùy chọn dự phòng được phân tách bằng dấu phẩy. TRONG trong trường hợp này Phông chữ tiêu đề sẽ là "Comic Sans MS" vì IE8 trở xuống không hỗ trợ định dạng TTF.
Kết quả ví dụ này thể hiện trong hình. 1.
Cơm. 1. Tiêu đề có phông chữ được tải
Phải làm gì nếu bạn rất cần một phông chữ hoa mỹ trong IE8? May mắn thay, @font-face cho phép bạn bao gồm nhiều tệp phông chữ cùng một lúc định dạng khác nhau. Trình duyệt chỉ cần chọn cái thích hợp. Do đó, một giải pháp phổ quát hoạt động trên tất cả các trình duyệt là chuyển đổi định dạng TTF hiện có sang EOT rồi kết nối cả hai tệp.
Để chuyển đổi, có một số dịch vụ trực tuyến cho phép bạn tải tệp TTF lên và nhận tệp EOT làm đầu ra. Thật không may, hầu hết các dịch vụ này đều có cùng một vấn đề - chúng tôi nhận được tệp nhưng ngôn ngữ tiếng Nga không được hỗ trợ. Sau cùng kết quả như ý không đạt được, việc chuyển đổi xảy ra không chính xác. Trong số các trang tôi đã kiểm tra, có một trang hiển thị văn bản chính xác trong IE.
Chúng tôi truy cập trang web này, tải xuống tệp TTF và nhấp vào nút “Chuyển đổi TTF sang EOT”, sau đó chúng tôi lưu tệp kết quả vào thư mục có phông chữ. Trong phong cách, vẫn phải thực hiện một thủ thuật nhỏ và ép buộc các trình duyệt khác nhau tải phông chữ vào ở định dạng được yêu cầu. Để làm điều này, chúng tôi thêm hai tham số src. Cái đầu tiên trỏ đến tệp EOT và dành cho các phiên bản IE cũ hơn. Tham số src thứ hai phải chứa hai địa chỉ được phân tách bằng dấu phẩy, một trong số đó trỏ đến tệp TTF. Thực tế là các phiên bản IE 8.0 trở về trước không hiểu dấu phẩy trong tham số src và theo đó, sẽ bỏ qua toàn bộ tham số. Có thể có một số tùy chọn viết, ví dụ: lặp lại url, chỉ định tên phông chữ bên trong tham số cục bộ hoặc thậm chí viết phông chữ không tồn tại. Nếu trình duyệt không thể tải phông chữ như vậy thì nó sẽ chuyển sang phông chữ thứ hai trong danh sách và chúng tôi đã viết đúng. Phương pháp viết được chấp nhận
src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);
Tùy chọn hoạt động để kết nối phông chữ cho tất cả các phiên bản trình duyệt được hiển thị trong ví dụ 2.
Ví dụ 2: Kết nối EOT
HTML5 CSS3 IE Cr Op Sa Fx
Yếu tố hiện đại Quá trình chính trị
Trên thực tế, những lời dạy chính trị của Montesquieu đã đưa ra loại hình văn hóa chính trị lục địa châu Âu, được phản ánh trong các tác phẩm của Michels.
Còn với iOS thì làm và tải về phông chữ riêng biệtĐối với tôi, có vẻ như định dạng SVG không có nhiều ý nghĩa. Lượng khán giả của các trang web xem nó qua iOS vẫn còn ít và bên cạnh đó, phiên bản của trang web dành cho thiêt bị di động Họ đang cố gắng làm cho nó dễ dàng hơn và không nên tải thêm vài chục kilobyte.
Phông chữ web của Google
Bạn có thể tìm thấy một dịch vụ tiện lợi đảm nhiệm quy trình hỗ trợ các định dạng phông chữ và phiên bản trình duyệt khác nhau tại www.google.com/webfonts. Mặc dù có tương đối ít phông chữ khác nhau trong bộ sưu tập (có vài chục phông chữ), nhưng chúng đều được chọn lọc có chất lượng rất cao và được sử dụng miễn phí trên các trang web.
Trước khi chọn phông chữ, hãy chuyển giá trị Script sang Cyrillic, sau đó bạn sẽ thấy danh sách các phông chữ hỗ trợ tiếng Nga (Hình 2).
Cơm. 2. Chọn phông chữ trong Google Web Phông chữ
Phông chữ bạn thích trước tiên phải được thêm vào bộ sưu tập bằng cách nhấp vào nút “Thêm vào bộ sưu tập”, sau đó nhấp vào nút “Sử dụng” ở góc dưới bên phải màn hình. TRÊN Trang tiếp theo(Hình 3) cuối cùng bạn cũng có thể chọn phông chữ mình cần. Đồng thời, bạn cần hiểu rằng một kiểu chữ có thể chứa một số kiểu và mỗi kiểu sẽ làm tăng dung lượng tệp tải xuống.
Cơm. 3. Phông chữ được tải trên trang
Bạn có thể kết nối các phông chữ đã chọn theo một trong ba cách; mã được thêm vào có thể được sao chép bên dưới trang.
1. Thông qua phần tử . Dòng này sẽ trông giống như thế này.
2. Thông qua quy tắc @import. Chúng tôi chèn dòng này vào tệp CSS của chúng tôi ở trên cùng.
@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Thông qua JavaScript.
Về nguyên tắc, tất cả các đường dẫn đều bình đẳng nên hãy chọn theo sở thích của bạn.
Lợi ích ứng dụng của dịch vụ này như là.
- Các phông chữ được sử dụng miễn phí, bạn không phải trả tiền cho chúng.
- Các phông chữ được cung cấp được “làm sắc nét” để xem trên màn hình, các tập tin được tối ưu hóa và chiếm dung lượng tương đối nhỏ.
- Trình duyệt được phát hiện tự động và phông chữ ở định dạng bắt buộc được cung cấp cho nó.
Một trong những ưu điểm chính của dịch vụ là phông chữ được lưu trữ trong định dạng TTF, EOT, WOFF, SVG và được tải sau khi kiểm tra trình duyệt. Do đó, định dạng EOT sẽ chỉ khả dụng cho các phiên bản IE cũ hơn.
Việc bạn có sử dụng Google Web Fonts hay không là tùy thuộc vào bạn. Nếu bạn không tìm thấy phông chữ phù hợp ở đó, bạn luôn có thể kết nối TTF phổ biến và phổ biến. Hơn nữa, nó được hỗ trợ phiên bản mới nhất tất cả các trình duyệt phổ biến.
Trong html, cỡ chữ đóng vai trò quan trọng. Nó cho phép bạn thu hút sự chú ý của người dùng đến Thông tin quan trọng, được đăng trên trang web. Mặc dù không chỉ kích thước của các chữ cái cũng quan trọng mà còn cả màu sắc, độ dày và thậm chí cả họ của chúng.
Thẻ và thuộc tính khi làm việc với phông chữ html
Ngôn ngữ siêu văn bản có bộ lớn công cụ làm việc với phông chữ. Xét cho cùng, định dạng văn bản là nhiệm vụ chính của html.
Lý do sáng tạo ngôn ngữ HTMLĐã xảy ra sự cố với trình duyệt hiển thị quy tắc định dạng văn bản.
Hãy xem xét các thẻ được sử dụng để làm việc với phông chữ trong HTML và các thuộc tính của chúng. Cái chính là thẻ . Sử dụng các giá trị thuộc tính của nó, bạn có thể đặt một số đặc điểm của phông chữ:
- màu – đặt màu văn bản;
- size – cỡ chữ theo đơn vị thông thường.
Các giá trị thuộc tính dương từ 1 đến 7 được hỗ trợ.
- khuôn mặt – được sử dụng để đặt họ phông chữ văn bản sẽ được sử dụng bên trong thẻ . Một số giá trị được hỗ trợ, phân tách bằng dấu phẩy.
Chỉ văn bản nằm giữa các phần của thẻ phông chữ được ghép nối mới được định dạng. Phần còn lại của văn bản được hiển thị phông chữ chuẩn, được cài đặt theo mặc định.
Ngoài ra trong html còn có một số thẻ được ghép nối chỉ xác định một quy tắc định dạng. Bao gồm các:
- - bộ trong html kiểu chữ in đậm. Nhãn hành động tương tự như lần trước;
- - kích thước lớn hơn mặc định;
- — kích thước nhỏ hơn nét chữ;
- - văn bản in nghiêng (in nghiêng). Thẻ tương tự ;
- - văn bản có gạch chân;
- gạch bỏ;- — chỉ hiển thị văn bản bằng chữ thường;
- - trong trường hợp trên.
Văn bản thô
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ị 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;
- TRONG giá trị 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) biến thể phông chữ - dịch mọi thứ chữ in hoaở thủ đô. 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 bằng số.
độ dày phông chữ: đậm
độ dày phông chữ: đậ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 sắc như 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.
