Best Web Safe Fonts for HTML and CSS
Ít ai biết ngoài các tài nguyên miễn phí như data số điện thoại khách hàng được chia sẻ miễn phí trên Kho Chất, Khochat.com còn hỗ trợ một số bạn làm website cá nhân và tối ưu SEO cho từng website. Trong quá trình làm thì rất nhiều trường hợp website bị xấu và site font chữ, do đó bài viết này sẽ chia sẻ về việc sử dụng font tiếng việt đẹp cho website và các phương pháp cơ bản nhất để chèn font chữ vào website của bạn an toàn nhé! (ưu tiên Google Font nhen)
Top 10 font tiếng việt an toàn cho website Unicode - giúp tương thích hầu hết mọi trình duyệt 2021
Trong thuật ngữ làm website, có 1 từ gọi là Web Safe Fonts - những font chữ an toàn cho toàn bộ các website. Nhiều lúc bạn sẽ gặp trường hợp làm cái website đẹp lắm nhưng lên điện thoại hay máy tính khác thì lại sai font xấu tùm lum. Và Web Safe Fonts là danh sách 10 font chữ mà lúc nào máy tính bạn cũng sẽ gần như có sẵn cho mọi loại ngôn ngữ.
Đây cũng là ưu tiên khi làm website và trong một số trường hợp giúp tăng thứ hạng website hay giúp giảm thời gian render cho trình duyệt nữa nhé.
Top 10 font tiếng việt an toàn cho Website hỗ trợ Unicode 2021:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Cách tìm font tiếng việt đẹp cho bạn đơn giản nhất:
Có font chữ rồi thì hiển nhiên có lúc bạn sẽ muốn tìm thêm font chữ khác phù hợp hơn cho website của mình, gợi ý đầu tiên mình khuyên bạn là tìm trên kho Google Font vì sự đơn giản và có thể tích hợp luôn font chữ đó mà không ảnh hưởng nhiều đến tốc độ của website.
Để tìm font ưng ý bạn hãy chuẩn bị trước cho mình 1 câu text khoảng 4 5 chữ và truy cập vào website: https://fonts.google.com/ nhé!
Khi vào website này, bạn đơn giản sẽ thấy giao diện cho phép tìm rất nhiều font chữ nhưng hãy gõ câu tiếng việt bạn đã giữ sẵn bên trên vào khung như dưới đây để nhìn nhanh các font chữ hiển thị nhen!
Nhớ chọn Tiếng Việt bên trên và chọn Trending để tìm những font chữ được sử dụng nhiều nhất để nhanh tìm được font chữ ưng ý của bạn nha!
Khi đã tìm được font chữ, tùy nhu cầu của mình bạn có thể tải font chữ về để dùng cho APP hoặc thiết kế. Tuy nhiên nhu cầu ở đây là chèn lên Website nên Khochat.com sẽ hướng dẫn bạn cách chèn font online cho website bên dưới luôn nhé!
Cách chèn font bất kì trên Google Font lên website miễn phí
Ưu điểm của Google Font đó là tốc độ gần như rất nhanh, do đó lý do mình ưu tiên đầu tiên khi gợi ý bạn dùng Google Font chính là nhờ sự tiện lợi này.
Thứ 2 là khi đã còn font chữ, việc tích hợp vô website cũng rất đơn giản chỉ với 3 bước:
Bước 1: Tìm font chữ và tên Font chữ bạn yêu thích, ví dụ như font chữ mình chọn là font Montserrat Alternates tại link: XEM VÍ DỤ
Bước 2: Copy lại tên font (ở đây là Montserrat Alternates) và vào phần <head> của website chèn code sau đây:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat+Alternates" />
Bước 3: Chỗ nào cần sử dụng font đó thì chỉ cần đưa Code sau vào CSS là ok:
font-family: Montserrat Alternates;
Như vậy bạn đã có thể sử dụng được font Google trên website của mình rồi đó! Đây cũng là cách chèn font website dễ nhất cho người mới bắt đầu lập trình website căn bản đó nha! (embed a font website)
Bonus thêm:
Top các code CSS làm đẹp website cho người thiết kế website không chuyên
Một số code CSS khác về text bạn có thể nên cài đặt cho website của mình để khiến cho website đẹp hơn, mình tổng hợp vài code phổ biến nhất mà nhiều bạn thích sử dụng và thường hay liên hệ mình để làm tối ưu và đẹp hơn website của mình:
1. Code căn chữ đều ngang 2 bên trái phải
text-align: justify;
Code này sẽ giúp các chữ text của bạn được căn đều mặc định 2 lề trái phải như các văn bản trên word, với ngôn ngữ tiếng anh thì nhiều khách hàng không quan tâm. Nhưng với các ngôn ngữ tiếng việt thì kinh nghiệm mình thấy nhiều khách sẽ rất thích vì thấy nó đều và chuẩn chỉnh hơn.
2. Code căn đều dòng
line-height: 23px;
Code này sẽ giúp các dòng văn bản của bạn cách đều nhau cho toàn văn bản hơn. Do cách làm việc hiện tại nhiều bạn trẻ hay dùng Google Doc để viết bài, do đó khi copy qua website như wordpress thì thường bị lộn xộn hết cả lên và câu chữ đôi khi rộng hẹp cao thấp khác nhau. Việc sử dụng code này fix cứng ở CSS sẽ giúp văn bản không bị sai khi dàn trang.
3. Code kết hợp cho toàn bộ body trên website dùng wordpress
Ở bên trên admin có chia sẻ 2 code riêng để bạn chèn vô từng mục, tuy nhiên sẽ có nhiều bạn muốn thay cho toàn bộ website của mình, thì khi đó chèn thẻ sau vào CSS bổ sung trong phần Tùy chỉnh của Wordpress nhé
body {
font-family: Open Sans;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #777;
text-align: justify;
}
4. Code CSS border làm tròn hình ảnh trên website Wordpress
Ngoài việc muốn canh lề các kiểu, một số website cũng sử dụng ngôn ngữ bo tròn góc hình ảnh để tạo cảm giác thân thiện hơn cho người dùng nhất là các website về thẩm mỹ - làm đẹp - hay bất động sản. Đây là code bo tròn bằng CSS border-radius cho bạn
img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
5. Code trích dẫn Blockquote CSS đơn giản đẹp
Ngoài các code cơ bản làm đẹp và căn lề cho website Wordpress dành cho các bạn content không chuyên hay mới bắt đầu trở thành content chuyên nghiệp - SEO chuyên nghiệp! Blockquote hay trích dẫn là một trong những tính năng nhiều bạn thích sử dụng nhất khi làm sinh động bài viết. Đây là 1 mẫu CSS Blockquote đẹp để các bạn thử tham khảo
blockquote {
max-width: 95%;
text-align: center;
margin: 20px;
padding: 20px;
border-radius: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
border-top: 1.5px dotted #428bca;
border-bottom: 1.5px dotted #428bca;
border-left: 1.5px dotted #428bca;
border-right: 1.5px dotted #428bca;
}
blockquote::before {
content: "\201C";
display: inherit;
font-size: 230px;
left: -50%;
top: 30px;
position: relative;
opacity: 20%;
height: 0px;
}
Tất nhiên đoạn code trên là cơ bản, bạn có thể tùy vào source của mình để tối ưu thêm cho phù hợp nữa nhé!
Hi vọng với Top 5 CSS Đẹp cơ bản trên, website của bạn nhìn đã đẹp hơn và chuẩn hơn chút nhé!
0 Nhận xét