Thuộc Tính Font | CSS3 | Học Web Chuẩn
Có thể bạn quan tâm
Thuộc tính font
- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính font
Định nghĩa và sử dụng
Thuộc tính font trong css3 dùng để định dạng các dạng font ngoài dạng đã được định nghĩa ở css2 (Xem thêm về font trong css2).
Cấu trúc
@font-face { thuộc tính: giá trị; }Thuộc tính của font trong css3:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| font-family | tên | font-family: myFont; | Xác định tên cho font chữ. |
| font-style | normal italic oblique | font-style: italic; | Xác định loại cho font chữ. |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | font-weight: bold; | Xác định font đậm hay không. |
| src | url(đường dẫn font) | src: url(files/vcouri.ttf); | Xác định đường dẫn font chữ được load. |
| unicode-range | phạm vi unicode | unicode-range: U+0020-U+007e; | Xác định phạm vi của các ký tự unicode được hỗ trợ. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | font-stretch: condensed; | Xác định văn bản rộng hơn hay hẹp hơn. (Thuộc tính này vẫn chưa được hỗ trợ bởi trình duyệt). |
Ví dụ
Xem thêm ví dụ
HTML viết:
<html> <head></head> <body> <p>Su dung font trong css3</p> <p class="addFont">Su dung font trong css3</p> </body> </html>Hiển thị trình duyệt khi chưa có CSS:
Su dung font trong css3
Su dung font trong css3
CSS viết:
@font-face { font-family: 'myFont'; src: url('vcouri-webfont.ttf'); } p.addFont { font-family: 'myFont'; }Hiển thị trình duyệt khi có CSS:
Su dung font trong css3
Su dung font trong css3
Sử dụng cách sau đây để các trình duyệt đều hiển thị tốt, CSS viết:
@font-face { font-family: 'myFont'; src: url('vcouri-webfont.eot'); src: url('vcouri-webfont.eot?#iefix'), /* IE4+ */ url('vcouri-webfont.woff') format('woff'), url('vcouri-webfont.ttf') format('truetype'), /* font chuan */ url('vcouri-webfont.svg#vni-courinormal') format('svg'); /* iphone, ipad*/ } p.addFont { font-family: 'myFont'; }Hiển thị trình duyệt khi có CSS:
Su dung font trong css3
Su dung font trong css3
Định dạng font được hỗ trợ bởi trình duyệt và hệ điều hành:
| Trình duyệt PC | Smartphone - Tablets | |||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |
| .ttf | 9 | 3.5 | 10.0 | 4 | 3.1 | 4.2 | 2.2 | 8 |
|---|---|---|---|---|---|---|---|---|
| .eot | 6 | X | X | X | X | X | X | 7.5 |
| .woff | 9 | 3.6 | 11.1 | 5 | 6.0 | 5.0 | X | 7.5 |
| svg | 9 | 2 | 9.0 | 4 | 3.1 | 3.2 | 3.0 | 8 |
- Chuyển đổi định dạng font: www.fontsquirrel.com
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho @font-face:
| Trình duyệt PC | Smartphone - Tablets | |||||||
![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |
| @font-face | 9 | 3.6 | 10 | 4 | 3 | 3.2 | 2.2 | 7.5 |
|---|---|---|---|---|---|---|---|---|
Link liên quan
- HTML/XHTML
- CSS
- class
- <html></html>
- <head></head>
- <body></body>
- <p></p>
column
font-size-adjust
CSS
HƯỚNG DẪN HỌC
- Hướng dẫn học
- Hướng dẫn học XHTML & HTML5
- Hướng dẫn học CSS
- Hướng dẫn học CSS3
- Hướng dẫn học Responsive
- Hướng dẫn học ES6
- Hướng dẫn học React.js
- Hướng dẫn học jQuery
- Hướng dẫn học PHP
- Hướng dẫn học Laravel
- Hướng dẫn học Wordpress
- Hướng dẫn học Webpack
- Hướng dẫn học SCSS
THAM KHẢO
Thuộc tính CSS3
- animation
- appearance
- backface-visibility
- background-clip
- background-origin
- background-size
- background gradient
- Nhiều background
- border-image
- border-radius
- box-align
- box-direction
- box-flex
- box-ordinal-group
- box-orient
- box-pack
- box-sizing
- box-shadow
- column
- @font-face
- font-size-adjust
- @keyframes
- nav
- opacity
- perspective
- perspective-origin
- resize
- text-justify
- text-overflow
- text-shadow
- transform
- transform-origin
- transform-style
- transition
- word-break
- word-wrap
Thuộc tính CSS3 chưa được hỗ trợ bởi trình duyệt
- grid-columns
- grid-rows
- hanging-punctuation
- icon
- punctuation-trim
- rotation
- target
- text-outline
- text-wrap
Tham khảo CSS
- CSS - Tham khảo
- CSS - Bộ chọn (selectors)
- CSS - Thuộc tính
- CSS3 - Tham khảo
- CSS3 - Bộ chọn (selectors)
- CSS3 - Thuộc tính
- Xem thêm ví dụ về CSS
Tham khảo HTML/XHTML
- Tham khảo HTML/XHTML
- Tag theo function
- Tag theo giá trị DTD
- Tham khảo HTML4/XHTML
- Tham khảo HTML5
- Xem thêm ví dụ về HTML
Tham khảo JQUERY
- jQuery - Tham khảo
- jQuery - Cài đặt và sử dụng
- jQuery - Bộ chọn (selectors)
- jQuery - Hàm (function)
- jQuery - Ajax
Tham khảo Thêm
- Lang codes
- Font chữ
- Mã ký tự
- MIME
- Đơn vị trong HTML & CSS
- Giá trị màu trong HTML & CSS
- Thuộc tính tổng quát
CHUYÊN ĐỀ
- Chuyên đề
- Chuyên đề HTML/CSS
- Chuyên đề HTML5/CSS3
- Chuyên đề jQuery/JS
- jQuery/JS plugin
GÓP Ý - LIÊN HỆ
- BẠN SẼ TÀI TRỢ?DONATE
- CÔNG CỤ TẠO CSS3CSS3 GENERATOR
- BỘ CÔNG CỤGENERATOR TOOLS
- CÔNG CỤ HỖ TRỢWEB TOOLS
- CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
- CÔNG CỤ KIỂM TRA RESPONSIVE TEST
- CHIA SẺ HAYWEB & TOOLS
Từ khóa » Chèn Font Chữ Vào Html
-
Bài 10: Cách Sử Dụng Font Trong Html Và Css - Góc Làm Web
-
Cách Thêm Font Chữ Vào Website
-
Cách Nhúng Font Vào Web Với @font-face, Kỷ Nguyên Của ... - Kiến Càng
-
Hướng Dẫn Thêm Font Chữ Tùy ý Cho Website - Cùng Học Web
-
Top 15 Chèn Font Chữ Vào Html
-
Các Font Chữ Trong Html
-
Cách Thêm Google Font Cho Website - Niềm Vui Lập Trình
-
Thêm Font Vào Website - YouTube
-
Thiết Lập Font Trong HTML, Thẻ Font Trong HTML - Hoclaptrinh
-
Các Font Trong HTML - - Thành Phố Cam Ranh
-
Sử Dụng Web Font Trong CSS
-
Sử Dụng Font Trong CSS | Lê Vũ Nguyên Dạy Học Lập Trình
-
Sử Dụng Google Font Làm Font Cho Website Của Bạn
-
20 Web Font HTML Tốt Nhất Năm 2022 - Hostinger










