header-object

Kỹ thuật load font từ Google và Website

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ụ

load-font-google-1

  • Bước 1, bạn dùng link css từ google để includes vào hệ thống
<link rel="stylesheet"  type="text/css" href="http://fonts.googleapis.com/css?family=Rufina">

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, …
<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
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
 <headrunat="server"> 
  	<title></title> 
  	<linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Rufina"/> 
  	<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

load-font-google-2

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

<linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Rufina|Averia  Gruesa Libre"/> 

Và source code đầy đủ là

	<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>

load-font-google-3

GV Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 810 khách đang truy cập
2491971