Tôi có một mẫu và nó có tham chiếu đến phông chữ Google như thế này:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>Làm cách nào tôi có thể tải xuống và thiết lập để sử dụng trong các trang đang chạy ngoại tuyến mọi lúc?
Câu trả lời:
Chỉ cần truy cập Google Fonts - http://www.google.com/fonts/ , thêm phông chữ bạn thích vào bộ sưu tập của bạn và nhấn nút tải xuống. Và sau đó chỉ cần sử dụng @fontface để kết nối phông chữ này với trang web của bạn. Btw, nếu bạn mở liên kết bạn đang sử dụng, bạn sẽ thấy một ví dụ về việc sử dụng @fontface
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300Ví dụ
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}Chỉ cần thay đổi địa chỉ url thành liên kết cục bộ trên tệp phông chữ, bạn đã tải xuống.
Bạn có thể làm điều đó thậm chí dễ dàng hơn.
Chỉ cần tải xuống tệp, bạn đã liên kết:
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300Đặt tên nó là opensans.css hoặc như vậy.
Sau đó, chỉ cần thay đổi các liên kết trong url () đến đường dẫn của bạn đến các tệp phông chữ.
Và sau đó thay thế chuỗi ví dụ của bạn bằng:
<link href='opensans.css' rel='stylesheet' type='text/css'>Nó cho phép bạn tải xuống mọi phông chữ web của Google và đề xuất mã css để thực hiện. Công cụ này cũng cho phép bạn chỉ cần tải xuống tất cả các định dạng cùng một lúc mà không gặp rắc rối.
Bạn đã bao giờ muốn biết Google lưu trữ webfont của họ ở đâu chưa? Dịch vụ này có thể hữu ích nếu bạn muốn tải xuống tất cả các tệp .eot, .woff, .woff2, .svg, .ttf của một biến thể phông chữ trực tiếp từ google (thông thường Tác nhân người dùng của bạn sẽ xác định định dạng tốt nhất).
Ngoài ra hãy xem trang Github của họ .
Content-type: text/css; charset: UTF-8
curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
Tìm thấy một cách từng bước để đạt được điều này (cho 1 phông chữ):
( kể từ ngày 9 tháng 9 năm 2013 )
- Chọn phông chữ của bạn tại http://www.google.com/fonts
- Thêm cái mong muốn vào bộ sưu tập của bạn bằng nút màu xanh "Thêm vào bộ sưu tập"
- Nhấp vào nút "Xem tất cả các kiểu" gần nút "Xóa khỏi bộ sưu tập" và đảm bảo rằng bạn đã chọn các kiểu khác mà bạn cũng có thể cần, chẳng hạn như 'in đậm' ...
- Nhấp vào nút 'Sử dụng' ở dưới cùng bên phải của trang
- Nhấp vào nút tải xuống trên cùng với một hình ảnh mũi tên xuống
- Nhấp vào "tệp zip" trên thông báo bật lên xuất hiện
- Nhấp vào nút "Đóng" trên cửa sổ bật lên
- Cuộn từ từ trang cho đến khi bạn thấy 3 tab "Standrd | @import | Javascript"
- Nhấp vào tab "@import"
- Chọn và sao chép url giữa
'url('và')'- Sao chép nó trên thanh địa chỉ trong một tab mới và đi đến đó
- Thực hiện "Tệp> Lưu trang dưới dạng ..." và đặt tên là "wishfontname.css" (thay thế cho phù hợp)
- Giải nén tập tin phông chữ .zip bạn đã tải xuống (.ttf nên được giải nén)
- Truy cập " http://ttf2woff.com/ " và chuyển đổi bất kỳ .ttf được trích xuất từ zip sang .woff
- Chỉnh sửa
desiredfontname.cssvà thay thế bất kỳ url nào trong đó [giữa'url('và')'] bằng tệp .woff được chuyển đổi tương ứng mà bạn có trên ttf2woff.com; đường dẫn bạn viết phải theo máy chủ doc_root- Lưu tệp và di chuyển nó ở vị trí cuối cùng của nó và viết
<link/>thẻ CSS tương ứng để nhập chúng vào trang HTML của bạn- Từ bây giờ, hãy tham khảo phông chữ này theo
font-familytên của nó trong phong cách của bạn
Đó là nó. Vì tôi có cùng một vấn đề và giải pháp trên không hiệu quả với tôi.
Các câu trả lời khác không sai, nhưng tôi thấy đây là cách nhanh nhất.
Kết quả chứa tất cả các định dạng phông chữ: woff, svg, ttf, eot .
VÀ như một phần thưởng bổ sung, họ cũng tạo tệp css cho bạn!
3 bước:
Ví dụ:
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}Nhìn vào src: -> url. Tải xuống http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 và lưu vào thư mục phông chữ . Sau đó thay đổi url cho tất cả các tập tin tải về của bạn. Bây giờ nó sẽ giống như
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}** Tải xuống tất cả các phông chữ chứa tệp .css Hy vọng nó sẽ giúp bạn
Nếu bạn muốn khai báo rõ ràng các phụ thuộc gói của mình hoặc tự động tải xuống, bạn có thể thêm gói nút để kéo phông chữ google và phục vụ cục bộ.
Các dự án kiểu chữ tạo gói NPM cho kiểu chữ Open Source:
Mỗi gói vận chuyển với tất cả các fons và css cần thiết để tự lưu trữ một kiểu chữ nguồn mở.
Tất cả các Phông chữ của Google đã được thêm vào cũng như một danh sách nhỏ nhưng đang phát triển các phông chữ nguồn mở khác.
Chỉ cần tìm kiếm NPM cho để duyệt các phông chữ có sẵn như kiểu chữ-Roboto hoặc kiểu chữ-mở sans và cài đặt như thế này:typeface-<typefacename>
$ npm install typeface-roboto --save
$ npm install typeface-open-sans --save
$ npm install material-icons --save Đối với trường hợp sử dụng chung chung hơn, có một số gói npm sẽ phân phối phông chữ theo hai bước, đầu tiên bằng cách lấy gói, sau đó bằng cách trỏ nó vào tên phông chữ và các tùy chọn bạn muốn đưa vào.
Dưới đây là một số tùy chọn:
Đọc thêm :
Về cơ bản bạn đang bao gồm các phông chữ vào dự án của bạn.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');Khi sử dụng Google Fonts, quy trình làm việc của bạn được chia thành 3 bước: "Chọn", "Tùy chỉnh", "Nhúng". Nếu bạn nhìn kỹ, ở cuối bên phải của trang "Sử dụng", có một mũi tên nhỏ cho phép bạn tải xuống phông chữ hiện tại trong bộ sưu tập của bạn.
Sau đó, và khi phông chữ được cài đặt trên hệ thống của bạn, bạn chỉ cần sử dụng nó như mọi phông chữ thông thường khác bằng cách sử dụng lệnh font-familyCSS.
Tôi đã làm theo câu trả lời của duydb để tạo mã python bên dưới để tự động hóa quá trình này.
import requests
with open("example.css", "r") as f:
text = f.read()
urls = re.findall(r'(https?://[^\)]+)', text)
for url in urls:
filename = url.split("/")[-1]
r = requests.get(url)
with open("./fonts/" + filename, "wb") as f:
f.write(r.content)
text = text.replace(url, "/fonts/" + filename)
with open("example.css", "w") as f:
f.write(text)Hy vọng điều này sẽ giúp với một số cái chết sao chép-dán.
Bạn cần tải về phông chữ và tham khảo nó cục bộ.
Tải xuống CSStừ liên kết bạn đã đăng, sau đó tải xuống tất cả các WOFFtệp và (nếu cần) chuyển đổi chúng thành TTF.
Sau đó thay đổi CSStừ liên kết bạn đã đăng để bao gồm các phông chữ cục bộ.
Từ
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)Đến
url(/path/to/font/font.woff)Voila! Có thể có một số điều bạn cần làm nhưng trên đây là những điều cơ bản. Bài viết này giải thích tốt hơn một chút.
font.woff? Bạn đã kiểm tra xem tập tin đã được tải chưa?
chỉ cần tải về phông chữ và giải nén nó trong một thư mục. sau đó liên kết phông chữ đó. các mã dưới đây làm việc cho tôi đúng.
body {
color: #000;
font-family:'Open Sans';
src:url(../../font/Open_Sans/OpenSans-Light.ttf);
}