CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Tìm hiểu về font trong CSS

Trong bài này mình sẽ tìm hiểu về font trong CSS và các thuộc tính liên quan. 

Trước khi đi vào nội dung chính thì mình lấy một ví dụ cho các bạn dễ hiểu, đó là trong phần mềm soạn thảo Word ta có thể tùy chỉnh nhiều thuộc tính cho font như: in đậm, in nghiêng, kiểu chữ, kích thước. Ta gọi đây là những thông số của font, và bạn hoàn toàn có thể làm điều này trong CSS.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để biết cách sử dụng font trong CSS như thế nào thì mình cùng điểm qua các thuộc tính chính của font nhé.

1. Một số thuộc tính chính của font

CSS hổ rất nhiều thuộc tính font để định dạng chữ. Tuy nhiên hôm nay mình chỉ giới thiệu các thuộc tính hay sử dụng đó là: font-family, font-size, font-weight, font-style.

font-family

font-family là thuộc tính quyết định loại font nào sẽ được áp dụng. 

Cú pháp sử dụng như sau:

 

selector {
    font-family: giá trị;
}

 

 

Ví dụ RUN
p {
        font-family: "Times New Roman", sans-serif, serif;
}

 

Ở ví dụ trên mình đã nhập vào ba loại font khác nhau (cách nhau bởi dấu phẩy) mục đích đề phòng trường hợp máy tính của client không hỗ trợ font đầu tiên thì nó sẽ lấy font thứ 2, cứ như vậy từ trái qua phải.

Bạn cũng có thể viết font-family nhiều lần và trình duyệt sẽ xét theo thứ tự từ trên xuống dưới.

p {
    font-family: "Times New Roman";
    font-family: sans-serif;
    font-family: serif;
}

Để chắc ăn thì bạn nên thêm một font mặc định có sẵn khi cài đặt các hệ điều hành nhé, hoặc bạn có thể sử dụng thuộc tính @font-face để lưu trữ font trên server (mình sẽ trình bày ở một bài khác).

Lưu ý: Khi tên của font mà nhiều hơn một từ thì các bạn phải để nó vào trong dấu nháy kép nha, ví dụ như "Time New Roman".

font-size

font-size là thuộc tính dùng để thiết lập kích cỡ của chữ.

Cú pháp:

selector {
        font-size: giá trị;
}

Mình sẽ lấy ví dụ sau:

Ví dụ RUN
p.f12 {
        font-size: 12px;
      }
p.f15 {
        font-size: 25px;
}

Mình có thể thiết lập giá trị cho font-size với nhiều unit khác nhau như px, pt, em... Còn Unit trong CSS như thế nào mình sẽ nói trong một bài khác, ở bài  này các bạn chỉ cần biết như vậy là được rồi :)

Lưu ý: Nếu bạn không chỉ rõ font-size là bao nhiêu thì mặc định nó hiển thị như chữ bình thường là 16px.

font-weight

font-weight là thuộc tính dùng để thiết lập độ đậm của chữ.

font-weight có thể sử dụng một trong hai loại sau:

  • Bằng số: 100, 200, 300, 400, 500, 600, 700,800, 900
  • Bằng chữ: normal, bold, lighter....

Trong đó:

  • normal: chữ sẽ hiển thị bình thường, đây cũng là giá trị mặc định và tương đương với 400.
  • bold: chữ sẽ hiển thị  đậm, tương đương 700.
  • bolder: chữ cái sẽ đậm hơn phần tử cha của nó.
  • lighter: chữ cái sẽ nhạt hơn chữ cái của phần tử cha.

Độ đậm sẽ tăng dần từ 100 đến 900.

Cú pháp:

Selector {
    font-weight: giá trị;
}

Các bạn xem ví dụ sau đây:

Ví dụ RUN
p.normal {
        font-weight: normal;
}
p.bold {
        font-weight: bold;
}
p.f100 {
       font-weight: 100;
}
p.f900 {
       font-weight: 900;
}

font-style

font-style là thuộc tính dùng để thiết lập chữ in thường hoặc in nghiêng, đơn giản vậy thôi :)

Cú pháp:

Selector {
    font-style: giá trị;
}

Để các bạn hiểu rõ hơn mình lấy một ví dụ sau:

Ví dụ RUN
 p.normal {
        font-style: normal;
}
p.italic {
        font-style: italic;
}

2. Trang web font miễn phí

Sau đây là một số trang web có font miễn phí. Chúng cho chúng ta có các nhìn tổng quan về từng loại font sẽ được hiển thị trên trang web như thế nào.

Hầu hết các trang web cung cấp phông chữ miễn phí, cung cấp phông chữ trong một định dạng duy nhất, thường là TrueType (.ttf) hoặc OpenType (.otf)

Để xem trong máy tính của chúng ta có bao nhiêu loại font, chúng ta vào thư mục C:\Windows\Fonts. Muốn thêm font mới cho máy tính của bạn, chỉ cần download font về máy và bỏ font đó vào thư mục này.

css font PNG

Mình sẽ hướng dẫn các bạn download font từ trang web: https://fonts.google.com/

Bước 1: Nhấp vào biểu tượng dấu +. Font sẽ được thêm vào cửa sổ "Family selected"

css font 2 PNG

Bước 2: Nhấp vào "Family Selected"

css font 3 PNG

Bước 3: Bấm vào biểu tượng download.

css font 4 PNG

3. Lời kết

Vậy là mình đã giới thiệu cho các bạn các thuộc tính chính để định dạng chữ rồi. Chúc các bạn vận dụng tốt.

Cuối cùng, trong khi viết không tránh khỏi sai sót. Nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để series của mình ngày càng một tốt hơn.

Tham khảo: w3school.com.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top