Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Thứ Bảy, 24 tháng 9, 2016

Khắc phục lỗi chặn CSS cho Google Font

Khắc phục lỗi chặn CSS cho Google Font
Nếu những font mặc định được cung cấp sẵn (có trên các Hệ điều hành) chưa làm bạn hài lòng thì bạn có thể sử dụng Google Font. 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.
Thông thường để nhúng Google Font vào Blogspot ta sử dụng:



<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'/>
Bằng cách trên, các trình duyệt riêng biệt như Chrome, Firefox... sẽ tự động điều chỉnh để tải font tương ứng về sao cho phù hợp nhất. Tuy nhiên thì cách này sẽ dẫn tới việc Blog hay Website sẽ bị chặn hiển thị CSS (blocking render CSS). Để khắc phục vấn đề này thì ta sử dụng @font-face, truy cập vào đường dẫn của font, ví dụ nhưhttps://fonts.googleapis.com/css?family=Roboto:400,500. Chỉ cần chọn CSS cho font phù hợp với ngôn ngữ của trang Web, ví dụ như:
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
Ở đây ta chỉ mới lấy được đường dẫn font có đuôi woff2, và sẽ không tương thích được với tất cả các trình duyệt. Để font hiển thị đúng cho tất cả trình duyệt hiện nay thì cần phải có được đường dẫn url cho font có đuôi woffttf... như:
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

Hướng dẫn lấy url cho font dạng woff và ttf:

Áp dụng cho các bạn dùng trình duyệt Chrome
   1. Cài Extension User-Agent Switcher for Google Chrome
   2. Sau khi cài xong, truy cập vào đường dẫn font, ví dụ: https://fonts.googleapis.com/css?family=Roboto:400,500. Sau đó click vào biểu tượng hình quả cầu của extension vừa cài, chọn trình duyệt Internet Explorer 10:
Khắc phục lỗi chặn CSS cho Google Font
 ta sẽ được font có đuôi woff
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
   3. Để lấy font có đuôi ttf, ta click vào biểu tượng extension bên trên, chọn trình duyệtSafari on Windows, ta được: 
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
Sau khi lấy được font với các đuôi mở rộng bên trên, ta kết hợp lại như sau: 
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
Với việc sử dụng CSS như trên để nhúng Google font vào Blogspot thì CSS sẽ không bị chặn nữa.

0 nhận xét

Đăng nhận xét