Hướng dẫn cách tích hợp Google fonts vào Website

Xem: 1024    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 5 đánh giá ) File đã được kiểm thử


Gfonts (Google fonts) là một ý tưởng mới được xuất phát từ một số Website trò chơi khi họ chèn vào Web một số font ngỗ nghĩnh đẹp mắt. Toàn bộ các font trong Gfont được để trong một nguồn trên Internet và các nhà phát triển Website có thể lấy một hoặc nhiều font từ nguồn đó và tích hợp vào trong Website của mình.

Toàn bộ các font trong Google font là những font hoàn toàn miễn phí và bạn có thể sử dụng những font chữ đó cho bất kỳ một Website nào (Blog cá nhân hoặc một những Website mang tính chất thương mại). Bộ siêu tập font của Google càng ngày càng nhiều và đó cũng là một nguồn tốt để các nhà phát triển Website hay các Designer có nhiều ý tưởng mới lạ cho những thiết kế của mình.

Sau đây tôi xin hướng dẫn các bạn một số cách để các bạn có thể tích hợp Google font vào trong Website của mình:

Có 2 cách để các bạn có thể gọi và tích hợp các font vào trong Webssite:

Cách thứ nhất:
Với cách thứ nhất này các bạn có thể trực tiếp một file CSS từ thư mục của Gfont như sau:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Và trong file CSS của mình các bạn định dạng font cho đối tượng như sau:

#your_div {
  font-family: 'Tangerine';
  font-size: 48px;
}

Để sử dụng một số font khác nhau cho một số đối tượng ( ví dụ: logo 1 font, tiêu đề 1 font,…) các bạn có thể tải nhiều font cũng một lúc và mỗi font được cách nhau bởi ký tự “|” như ví dụ dưới đây.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Với mỗi font thì đều có các thuộc tính đi kèm với font đó ví dụ như thuộc tính Bold, Italic,… Do vậy trong quá trình tích hợp chúng ta có thể gọi các thuộc tính đó đi kèm với tên font. Các thuộc tính đó được quy định trong cách gọi của Google font như sau:

bold:b
bold:700
italic:i
bolditalic:bi
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Cách thứ hai:
Trong cách thứ hai này chúng ta sẽ dùng hàm Load của Javascript để lấy về font mà ta cần sử dụng.

WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId',
custom: {
families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ]
}
});
Một vài chú ý.
1. Đối với khách lần đầu tiên khi vào Website của bạn thì có một điều chắc chắn sẽ sảy ra đó là font tải về hơi chậm, bạn phải chờ vài giây sau đó trình duyệt mới thay thế được font của bạn bằng Gfont. Để khắc phục điều đó chúng ta có thể sử dụng thủ thuật load font trước khi load các đối tượng cần thay thế font.
 
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
 
2. Đề phòng tình huống xảy ra khi không load được font trên Google chúng ta cần khai báo thêm họ của font cần thay thế. Khi đó trong trường hợp không tải được font về thì trình duyệt sẽ tự động thay thế bằng một font tương tự cùng họ font với font cần load.
.wf-active p {
font-family: ‘Tangerine’, serif;
}
 

Hướng dẫn cách tích hợp Google fonts vào Website

Hướng dẫn cách tích hợp Google fonts vào Website Đăng ngày 25-08-2014  Gfonts (Google fonts) là một ý tưởng mới được xuất phát từ một số Website trò chơi khi họ chèn vào Web một số font ngỗ nghĩnh đẹp mắt. Toàn bộ các font trong Gfont được để trong một nguồn trên Internet và các nhà phát triển Website có thể lấy một hoặc nhiều font từ nguồn đó và tích hợp vào trong Website của mình. 5/10 1024

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn