Hướng dẫn font-style trong css

Posted on by mtoplistChuyên mục:Top List
  • Cỡ chữ – font-size
  • Kiểu chữ – font-style
  • Dày mỏng của chữ font-weight
  • Biến đổi chữ với font-variant

Cỡ font chữ với thuộc tính font-size trong CSS

Thuộc tính font-size trong CSS thiết lập cỡ chữ. Các giá trị font-size có thể nhận là:

Nội dung chính

  • Cỡ font chữ với thuộc tính font-size trong CSS
  • font-size sử dụng các giá trị tuyệt đối như small, large
  • font-size cỡ chữ chỉ rõ theo đơn vị px, em
  • font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML
  • font-weight thiết lập độ dày, mỏng của chữ trong HTML CSS
  • Video – Cách sử dụng font trong html và css
  • Hướng dẫn chi tiết
  • Cách 1: Tải và dùng trực tiếp font
  • Định dạng CSS
  • Cách 2: Dùng Google font
  • Các thuộc tính đã hướng dẫn
  • Các cỡ chữ tuyệt đối căn cứ theo cỡ chữ mặc định gồm: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
  • Chỉ ra kích
    thước theo đơn vị mong muốn như 14px (xem các đơn vị CSS)
  • Chỉ ra giá trị phần trăm so với font chữ phần tử cha, như 80%

font-size sử dụng các giá trị tuyệt đối như small, large

Ví dụ có HTML và CSS như sau:

Kết quả: (biên tập code trên để xem thay đổi)

font-size cỡ chữ chỉ rõ theo đơn vị px, em

Bạn có thể chỉ ra cụ thể cỡ chữ với một giá trị
theo đơn vị pixel (px) cũng như đơn vị em. Đơn vị em là thiết lập đơn vị theo quan hệ tương đối. Nếu bạn chưa thiết lập cỡ chỡ ở đâu trên trang thì mặc định cỡ chữ là 16px tương đương với 1em

Như vậy để chuyển đổi px sang em dùng công thức: em = pixel/16

h2 {
   font-size: 20px;
}

Tương đương với:

h2 {
   font-size: 1.25em; 
}

font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML

Thuộc tính font-style trong css dùng để thiết lập kiểu chữ. Với các giá trị:

  • normal kiểu chữ bình
    thường
  • italic chữ nghiêng – in nghiêng css
  • oblique nghiêng (có thể thiết lập độ nghiêng tuy nhiên tùy thuộc vảo font chữ có thiết lập được không)

Kết quả: (biên tập code trên để xem thay đổi)

font-weight thiết lập độ dày, mỏng của chữ trong HTML CSS

Thuộc tính font-weight trong CSS thiết lập độ dày mỏng (đậm, nhạt) của chữ, nó có thể nhận các giá trị như normal, bold, bolder, lighter hoặc nhận giá trị số từ 1 đến 1000. (400 tương tương
normal, 700 tương đương bold – in đậm css).

Kết quả: (biên tập code trên để xem thay đổi)

font-variant để biến đổi font chữ, có thể nhận các giá trị: normal, small-caps

Kết quả: (biên tập code trên để xem thay đổi)

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng font trong html và css. Có hai dùng font là tải về, dủng trực tiếp trong mã nguồn. Cách thứ hai là dùng google font.

  • Video – Cách sử dụng font trong html và css
  • Hướng dẫn chi tiết
    • Cách 1: Tải và dùng trực tiếp font
      • Giao diện HTML
    • Định dạng CSS
    • Cách 2: Dùng Google font
  • Các thuộc tính đã hướng dẫn

Video – Cách sử dụng font trong html và css

Hướng dẫn chi tiết

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Cách 1: Tải và dùng trực tiếp font

+ Tải font từ trên mạng về (các bạn nên chú ý vấn đề bản quyền).

+ Lưu vào thư mục chứa mã nguồn html và css. Dùng đường dẫn gián tiếp như đã hướng dẫn ở các bài trước.

+ Trong file css

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Dùng @font-face trong file css để định nghĩa font:

+ src:url(đường dẫn đến file font). Đường dẫn bao gồm luôn cả phần đuôi file.

+ thuộc tính font-family trong trường hợp này có tác dụng đặc tên cho font mà chúng ta muốn dùng.

Để áp dụng font đã định nghĩa, ta dùng thuộc tính font-famaly theo tên mà chúng ta đặt trong font-face.

Giao diện HTML

Định dạng CSS

Cách 2: Dùng Google font

Hướng dẫn tóm tắt, phần chi tiết sẽ trình bày trong video
bên trên.

+ Vào google search, tìm kiếm từ khóa “Google font” hoặc vào đường dẫn https://fonts.google.com

+ Chọn font muốn sử dụng. Mở hộp thao5i nhỏ dưới màn hình Family selected.

Trong tab customize, chọn các định dạng sẽ được hỗ như như bold (in đậm), italic (in nghiêng), light (nét mảnh) …

Lưu ý: càng có nhiều định dạng hỗ trợ càng load lâu hơn.

Trong tab Embed, copy đoạn <link>….</link>  và dán vào thẻ head trong file html.

Để áp dụng font, các bạn dùng thuộc tính font-family theo hướng dẫn của Google.

Các thuộc tính đã hướng dẫn

+ float: left (right) dồn các khối

+ overflow: hidden

+ display: block

+ margin và padding

+ border : viền, 1px (độ dày) black (màu) solid (loại
nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: (màu chữ) dùng green, red hay mã màu

+ background-color: (màu nền)black

+ background-image: url(imgage
source).

Code mẫu: download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên Like, Share nếu thấy bài viết thú vị.

Liên hệ

mtoplist