Thuộc Tính Font | CSS3 | Học Web Chuẩn

Trang chủ » Chèn Font Chữ Vào Html » 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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
.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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
@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
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Chèn Font Chữ Vào Html