Làm cách nào để tôi nhúng Google Web Fonts vào SVG?

Tôi đang viết một bài viết trên trang web của mình về những lợi thế của các công nghệ web mới, trong số các HTML5, CSS3 và SVG khác, một trong những lợi thế của cái sau là khả năng chọn văn bản trong hình ảnh có hiệu quả khác.

Tôi mới sử dụng SVG và vừa tạo ra đồ họa đẹp đầu tiên của mình trong Illustrator. Tôi đã nhúng nó vào một trang với tập lệnh GWF cho phông chữ Ubuntu trong thẻ. Hóa ra, phông chữ Ubuntu hiển thị chính xác trong văn bản thông thường, nhưng để thủ thuật này hoạt động trong SVG, tập lệnh Google phải được nhúng vào chính SVG. Tôi có thể làm cái này như thế nào?

Bạn nhúng phông chữ vào CSS bằng cách sử dụng mã hóa base64. Bạn có thể áp dụng các kiểu trong tài liệu SVG tương tự CSS bằng cách sử dụng một <style />phần tử. Vì vậy, nếu bạn có phông chữ WOFF, bạn sẽ nhúng nó như thế này:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Đâu ...là dữ liệu phông chữ được mã hóa base64.

Bạn có thể tìm thấy các ví dụ về điều này bằng cách xem biểu định kiểu của Typekit. Tôi không chắc loại mime font/woffcó đúng không, vì tôi cũng đã thấy mọi người cho rằng nó phải như vậy application/font-woff. Mặc dù font/woff, font/truetype, font/opentypevv dường như phổ biến hơn.

Ngoài ra, bạn thực sự có thể lấy phiên bản SVG của phông chữ web và nhúng đánh dấu mô tả của phông chữ SVG bên trong tài liệu của bạn (mặc dù hỗ trợ trình duyệt vẫn còn rất hạn chế như ghi chú của Luke trong các nhận xét).

Tuy nhiên, bạn cũng có thể liên kết với một phông chữ bên ngoài theo đặc điểm kỹ thuật của SVG . Đó dường như là giải pháp tốt nhất nếu bạn có nhiều tài liệu SVG tham chiếu phông chữ đó.

Một <defs>phần như

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

làm.

Bạn có thể nhúng Google Web Fonts vào SVG của mình trực tiếp bằng Nano . Nó tự động quét SVG của bạn và chỉ nhúng có chọn lọc các phông chữ cần thiết, đảm bảo rằng phông chữ Ubuntu của bạn trông giống nhau trên tất cả các trình duyệt hiện đại. Trong trường hợp của tôi, tôi cần Roboto để được nhúng vào SVG của mình:

Tuyên bố miễn trừ trách nhiệm: Tôi cùng với đội ngũ đằng sau Nano, và chúng tôi cũng vậy, đã phải đối mặt với cùng một vấn đề trước đó do đó đã quyết định tự gãi ngứa bằng cách xây dựng Nano. Hy vọng điều này là hữu ích!

Chỉnh sửa: Đây là một lời giải thích nhanh về những gì xảy ra đằng sau hậu trường:

Để nhúng phông chữ trong SVG, trước tiên bạn phải biết họ phông chữ nào được sử dụng. Sau đó, bạn cần tìm các tập tin phông chữ và tải chúng. Sau khi tải về, bạn phải chuyển đổi chữ in nghiêng thông thường, in đậm, in nghiêng và in đậm sang mã hóa cơ sở 64. Nếu bạn đang thực hiện thủ công, thì đó là một khối lượng công việc khổng lồ, qua một số lượng lớn tệp, để biết tệp nào sử dụng đậm và tệp nào không. Sau đó, bạn phải sao chép tất cả 4 chuỗi mã hóa 64 cơ sở vào SVG của bạn.

Đó là lý do tại sao chúng tôi xây dựng Nano và đảm bảo nó quét SVG tự động và chỉ chèn các phông chữ đang được sử dụng. Ví dụ: nếu in đậm không được sử dụng hoặc nếu không có văn bản tồn tại, thì sẽ không có phông chữ nào được nhúng. Tất cả những gì bạn cần làm là kéo và thả SVG của bạn vào Nano và nó hoạt động như một bùa mê! Bạn có thể tìm hiểu thêm tại đây: https://vecta.io/blog/making-svg-easier-to-use

Điều này có thể đơn giản hóa quá mức, nhưng bạn đã xem xét việc tải xuống phông chữ dưới dạng tệp zip từ google và sau đó để Illustrator chuyển đổi nó khi cần thiết thành đầu ra tệp SVG của bạn?

Đây chỉ là lý thuyết vì tôi chưa thử điều này, nhưng trên lý thuyết có vẻ hiệu quả.

Thêm vào sau <desc>thẻ sau

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

CẬP NHẬT câu trả lời của tôi. Bây giờ tôi thích một câu trả lời khác trên trang này, đó là sử dụng Nano: https://gpsondesign.stackexchange.com/a/121950/45239

Giả sử bạn đã tải xuống và cài đặt phông chữ web trên hệ thống của mình và đã tạo một SVG (có thể sử dụng nhiều bước tương tự như tôi mô tả bên dưới nhưng không chọn "Phông chữ: Chuyển đổi thành phác thảo"), bạn có thể tải SVG lên Nano và xem tùy chọn "Nhúng phông chữ: Có" và nhấp vào Tải xuống.

Câu trả lời trước của tôi:

Nếu bạn sẵn sàng hy sinh việc có văn bản và SEO có thể lựa chọn:

1. Tải về phông chữ web.
2. Cài đặt nó cục bộ.
3. Mở Adobe Illustrator
4. Gõ văn bản của bạn.
5. Tập tin> Xuất> Xuất dưới dạng
6. Chọn ".SVG"

7. Chọn các cài đặt sau:

   • Kiểu dáng: Phong cách nội tuyến
   • Phông chữ: Chuyển đổi thành Đề cương
   • Hình ảnh: Bảo tồn
   • ID đối tượng: Tên lớp
   • Số thập phân: 2
   • (đã bật) Giảm thiểu
   • (đã bật)

8. Tùy chọn tải lên Svg kết quả lên https://vecta.io/nano (Nó có thể giảm kích thước tệp của tôi xuống 8.2%)