Cách set font chữ cho website của bạn 1 cách dễ dàng
TIL
770
White

Dang Hoang Tuan viết ngày 15/09/2020

Hello mọi người!

Nếu bạn đang làm cho 1 dự án front-end thì có thể bạn sẽ biết rằng font chữ đóng vai trò quan trọng trong việc trang trí web của bạn. Nó giúp trang web của bạn trông đẹp hơn. Nên hôm nay, mình xin được hướng dẫn cho các bạn cách để set font chữ cho website của bạn 1 cách dễ dàng và tiện lợi nhé! :)

Note: Đây là lần đầu tiên mình gõ 1 bài viết trên Kipalog nên nội dung có thể còn khá sơ sài và có vài chỗ sai, bạn thấy sai chỗ nào thì nhớ góp ý cho mình nhé :D

1. Lấy font từ Google Fonts

Google Fonts là 1 trang web của Google lưu trữ rất nhiều loại font khác nhau để bạn thỏa sức lựa chọn nên chúng ta sẽ lấy 1 font từ Google Fonts nhé.

Đầu tiên mở 1 tab mới và gõ fonts.google.com:

alt text

Sau đó, bạn sẽ nhìn thấy nhiều loại phông chữ khác nhau, hãy chọn 1 kiểu chữ mà bạn thích, của mình là Noto Sans JP.

alt text

Sau đó thì bạn sẽ thấy nhiều loại độ đậm chữ khác nhau, từ nhẹ đến đậm, rồi chọn 1 độ đậm chữ phù hợp với bạn bằng cách nhấn vào
alt text
Mình sẽ chọn loại Light 300 nhé. :)

alt text

Sau khi chọn độ đậm xong thì sẽ có 1 thanh hiển thị các font và độ đậm chữ mà bạn đã chọn, khi này các bạn hãy chọn phần Embed trên thanh đó.

alt text

Khi này thì bạn sẽ có 2 lựa chọn:

  • Nhúng font bằng tag <link> rồi gõ câu lệnh font-family: 'Noto Sans JP', sans-serif; (câu lệnh này có thể thay đổi tùy vào font chữ mà bạn chọn) để set font

  • Nhúng font bằng câu lệnh @import rồi gõ câu lệnh như trên để set font

Trong trường hợp của mình thì mình sẽ set theo cách 2 (cách bằng câu lệnh @import) nhé.

2.Set font cho web của bạn

Khi này, sau khi copy code xong, hãy mở file HTML mà bạn muốn set và bằng Text Editor/IDE mà bạn thích, của mình thì sẽ là index.html và Sublime Text.

alt text

Khi này, trong đoạn code của web, ở trong tag <head>, bạn hãy paste code mà bạn vừa có trên Google Fonts ở bất kì chỗ nào trong tag <head>.

alt text

Lúc này, để áp dụng font cho tất cả các tag, gõ lệnh sau trong tag <style>:

* {
  font-family: 'Noto Sans JP', sans-serif;
}

Và... Thế là xong!.

Như vậy, bạn đã biết cách set font cho trang web của bạn rồi! Chúc các bạn có một ngày vui vẻ nhé! :D

alt text

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Dang Hoang Tuan

1 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 5
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 5
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết gần 2 năm trước
4 0
White
24 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 4 năm trước
24 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!