Bạn là người IT chuyên về các website như vậy CSS là một trong những cách mà bạn dùng để định dạng website.Trong quá trình định dạng (format) văn bản bằng website bạn sẽ không tránh khỏi đến vấn đề load font vào hệ thống của mình.Thông thường bạn dùng những font đã có sẵn trong server để trả về kết quả.
1. Vấn đề
Bạn là người IT chuyên về các websitenhư vậy CSS là một trong những cách mà bạn dùng để định dạng website.Trong quá trình định dạng (format) văn bản bằng website bạn sẽ không tránh khỏi đến vấn đề load font vào hệ thống của mình.Thông thường bạn dùng những font đã có sẵn trong server để trả về kết quả. Vấn đề ở đây bạn muốn load một font riêng cho mình mà mình cảm thấy phù hợp với thiết kế hiện tại của website. Có nhiều cách để thực hiện tôi muốn hướng dẫn cho bạn cách thực hiện bằng cách load font từ website của google
2. Coding
Đầu tiên để giải quyết vấn đề trên bạn cần phải biết được mình cần load được font gì từ google. Bạn cần vào link bên dưới để xem các font mà google hỗ trợ.https://www.google.com/webfonts có nhiều font để bạn có thể chọn lưa.ở đây, tôi sẽ chọn một font Rufina để làm ví dụ
- Bước 1, bạn dùng link css từ google để includes vào hệ thống
1
|
Link trên có ý nghĩa là bạn sẽ load font tên là Rufina theo cú pháp family=Rufina
- Bước 2, tạo class hoặc id để định dạng cho div hoặc heading, …
1
2
3
| <styletype="text/css"> h1{font-family:'Rufina';font-size:50px;}</style> |
Bây giờ chúng ta sẽ dùng cho tag H1 để định dạng bằng font Rufina và có size là 50px
- Thiết kế bằng source code để ứng dụng font trên vào hệ thống
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <headrunat="server"> <title></title> <styletype="text/css"> h1{font-family:'Rufina';font-size:50px;}</style> </head> <body> <formid="form1"runat="server"><div> <h1>LOAD FONT TỪ GOOGLE</h1></div> </form> </body> </html> |
3. Kết quả
Kết quả ta đạt được từ việc xác định font trên như hình bên dưới
4. Lưu ý
Một vài lưu ý khi bạn sử dụng font từ google. Đối với link trên bạn chỉ sử dụng một font duy nhất, để sử dụng được nhiều bạn cần phân cách các font bằng ký tự “|”. Bây giờ ví dụ load font tên là Averia Gruesa Libre, vậy ta đổi lại link trên thành
1
| <linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Rufina|Averia Gruesa Libre"/> |
Và source code đầy đủ là
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <headrunat="server"> <title></title><linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Rufina|Averia Gruesa Libre"/> <styletype="text/css"> h1{font-family:'Rufina';font-size:50px;}h2{font-family:'Averia Gruesa Libre';font-size:40px;color:Red;}</style> </head> <body> <formid="form1"runat="server"> <div> <h1>LOAD FONT TỪ GOOGLE</h1><h2>LOAD FONT TỪ GOOGLE</h2></div> </form> </body> </html> |
