• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Cách dễ dàng để lưu trữ Google Phông chữ tại địa phương

admin by admin
Tháng Tư 7, 2022
Home Tài Liệu Designer

Với hơn 1.250 phông chữ mã nguồn mở, miễn phí, Google Fonts là một nguồn tài nguyên tuyệt vời cho các nhà thiết kế web. Hầu như mọi kiểu chữ đều có sẵn ở đây và hơn 135 ngôn ngữ được trình bày.

Thông thường, các phông chữ này được triển khai thông qua API Google Fonts. Thêm một vài đoạn mã vào trang web của bạn, gọi các phông chữ trong CSS của bạn và gọi nó là một ngày. Dễ dàng, phải không? Và quá trình này thậm chí có thể dễ dàng hơn nếu bạn đang sử dụng một plugin hoặc chủ đề cho phép bạn chọn phông chữ khi bạn thực hiện.

Nhưng cũng có những lý do thuyết phục để lưu trữ Google Fonts cục bộ trên máy chủ web của bạn. Quyền riêng tư là một, vì một số khu vực pháp lý có cai trị rằng lưu trữ phông chữ từ xa vi phạm luật GDPR của Châu Âu.

Hiệu suất là một tiềm năng khác được xem xét. Trong khi có một số tranh luận về lưu trữ cục bộ so với API Google Fonts, Sự khác biệt dường như là tương đối nhỏ. Tùy chọn sử dụng mạng phân phối nội dung (CDN) cũng là một khả năng.

Nếu bạn đang muốn lưu trữ Google Fonts tại địa phương, chúng tôi sẽ giới thiệu cho bạn một cách dễ dàng để triển khai chúng. Nghiêm túc đấy – bạn có thể thiết lập và chạy trong vòng vài phút!

Hơn 18.000 Phông chữ Serif, Sans-Serif, Script, Trang trí & Mono

Thêm vào đó, Mockups, Actions, Brushes, Graphic Template, Logo Template, và nhiều hơn thế nữa!

Nội dung

  • Đầu tiên, xác định Phông chữ Google mà bạn muốn sử dụng
  • Thêm phông chữ bằng Google Webfonts Helper
  • Cung cấp Google Phông chữ tại địa phương
    • Bài viết liên quan:

Đầu tiên, xác định Phông chữ Google mà bạn muốn sử dụng

Bước đầu tiên của quy trình là xác định Phông chữ Google nào bạn muốn sử dụng trong dự án của mình. Duyệt qua trang web chính thức và lưu ý những điều sau:

  • Tên phông chữ;
  • (Các) phong cách bạn muốn sử dụng;
  • (Các) ngôn ngữ bạn cần;

Họ phông chữ Roboto trên Google Phông chữ.

Bây giờ bạn có thể tải xuống các lựa chọn của bạn trực tiếp từ Google Fonts. Và mặc dù không có gì sai với phương pháp này, nhưng nó có thể hơi rườm rà.

Để sử dụng các phông chữ trên trang web của bạn, bạn cũng phải gọi các tệp được lưu trữ cục bộ qua @font-face trong CSS của bạn. Điều đó liên quan đến việc xem mã nguồn của Google cho từng phông chữ, sau đó chọn bộ ký tự chính xác và thay đổi src thuộc tính phù hợp với nơi lưu trữ phông chữ của bạn.

Ví dụ: nếu chúng ta muốn sử dụng “ánh sáng”, CSS trông như thế này (nhận xét được thêm / chỉnh sửa cho rõ ràng):

/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}

Có lẽ đó không phải là điều tồi tệ nhất trên thế giới. Nhưng nếu bạn có nhiều phông chữ, mỗi phông chữ có nhiều kiểu, điều này có thể trở nên rất tẻ nhạt.

Thêm phông chữ bằng Google Webfonts Helper

Lưu trữ Google Fonts cục bộ không cần phải quá phức tạp. Các google-webfonts-helper là một công cụ làm cho quá trình trở nên cực kỳ trơn tru. Nó thực hiện tất cả các công việc nặng nhọc cho bạn.

Trước khi bắt đầu, hãy lưu ý: có thể có sự khác biệt về phiên bản giữa google-webfonts-helper và chính Google Fonts. Google Fonts được cải thiện theo thời gian. Không sử dụng API có nghĩa là không phải lúc nào cũng có phiên bản mới nhất.

Trang chủ của trình trợ giúp Google webfonts.

Để bắt đầu, hãy tìm kiếm (các) phông chữ bạn muốn sử dụng. Lưu ý rằng bạn chỉ có thể làm việc với một phông chữ tại một thời điểm. Các bước dưới đây sẽ cần được lặp lại cho mỗi phông chữ bổ sung.

Trong trường hợp của chúng tôi, chúng tôi sẽ tìm thấy một trong những phông chữ phổ biến nhất của Google, Roboto, từ danh sách.

Họ phông chữ Roboto tại trình trợ giúp Google webfonts.

Tiếp theo, đã đến lúc chọn bộ ký tự (charset) và kiểu mà chúng ta cần.

Các bộ ký tự và kiểu phông chữ được chọn cho Roboto.

Dựa trên lựa chọn ký tự và kiểu của chúng tôi, google-webfonts-helper tạo CSS cần thiết. Theo mặc định, mã này nhằm mục đích hỗ trợ nhiều trình duyệt nhất có thể. Tuy nhiên, chúng tôi cũng có thể chọn tập trung vào các trình duyệt hiện đại.

Nó thậm chí còn cho phép chúng tôi chỉnh sửa thư mục cơ sở nơi chúng tôi muốn lưu trữ các tệp phông chữ. Điều này sẽ được phản ánh ngay lập tức trong CSS.

CSS được tạo bởi trình trợ giúp webfonts của Google.

Với tất cả các cài đặt của chúng tôi hiện đã được áp dụng, bạn có thể tải xuống tệp lưu trữ .ZIP. Chúng tôi sẽ giải nén tệp lưu trữ đến đích đã chọn và tải nó lên máy chủ web của chúng tôi.

Nút tải xuống từ trình trợ giúp webfonts của Google.

Cuối cùng, chúng tôi sẽ dán @font-face mã vào CSS của chúng tôi. Ghi chú về font-family chúng tôi có thể thêm các phông chữ này vào bất kỳ bộ chọn CSS nào mà chúng tôi muốn.

Cung cấp Google Phông chữ tại địa phương

Với một vài bước đơn giản (và sự hỗ trợ từ google-webfonts-helper), bạn có thể bỏ qua API Google Fonts và các phông chữ lưu trữ cục bộ. Nó không chỉ cải thiện quyền riêng tư của người dùng mà còn giúp tránh các biến chứng tiềm ẩn từ thời gian ngừng hoạt động của API hoặc tắc nghẽn hiệu suất.

Điều đó đang được nói, các phông chữ được lưu trữ cục bộ có nghĩa là làm việc nhiều hơn cho máy chủ web của bạn. Vì vậy, điều quan trọng vẫn là sử dụng bộ nhớ đệm và các tối ưu hóa khác. Những yếu tố này nên được xem xét trước khi bạn lao vào.

Bất kể bạn sử dụng Google Fonts như thế nào, thật tuyệt khi biết rằng có nhiều cách để làm như vậy. Điều này cho phép bạn chọn phương pháp tốt nhất cho nhu cầu của bạn. Và lưu trữ chúng tại địa phương có thể là cách phù hợp để đi.


Đánh giá bài viết
[Total: 0 Average: 0]

Bài viết liên quan:

  1. Share bộ font chữ kiểu xưa cũ tuyệt đẹp 2022
  2. Tải về 54 font chữ thư pháp thiết kế Tết tuyệt đẹp
  3. Share Preset Lightroom đẹp miễn phí 2022
  4. 71 phím tắt trong Photoshop thông dụng nhất
  5. Tổng hợp 61 Background Tết 2022 (PSD) miễn phí
Tags: font chữphông chữ
admin

admin

Next Post
20 phông chữ phác thảo miễn phí tốt nhất cho nhà thiết kế

20 phông chữ phác thảo miễn phí tốt nhất cho nhà thiết kế

15 Phông chữ Disney miễn phí tốt nhất mà bạn nên có trong bộ sưu tập của mình

15 Phông chữ Disney miễn phí tốt nhất mà bạn nên có trong bộ sưu tập của mình

The 100 Best Free Fonts for 2022

The 100 Best Free Fonts for 2022

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply