HTML5 & CSS3

Cách thức sử dụng Google Font API cơ bản

Chia sẻ nhanh

Khi sử dụng Google font, thông thường cách áp dụng sẽ là import trực tiếp vào html hoặc css đường link của google font. Nó đại loại kiểu kiểu như ở dưới đây

<head>
  
   ...

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

Tuy nhiên, google lại sử dụng định dạng từ User Agent mà đưa ra những font tốt hơn cho phù hợp từng loại thiết bị. Điều đó khiến bạn phải lo ngay ngáy khi khách hàng của bạn sài toàn font dị hợm hoặc ngôn ngữ đặc thù. Vậy phương án giải quyết vấn đề này dư lào? chúng ta sẽ thực hiện các bước dưới đây

CSS

Trong css, bạn nện thẳng font face mà bạn muốn như sau

body { 
  font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; 
  font-size: 48px; 
}

FontLoader

Việc load font vào website chúng ta sẽ sài bằng js. 

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 
  }
</style>

 

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?