2011-12-21 11 views
7

Tôi là người mới sử dụng SVG và chỉ làm đồ họa phong nha đầu tiên của mình trong Illustrator. Tôi đã nhúng nó vào một trang (bằng cách sử dụng thẻ <embed>) với phông chữ Google Web Fonts cho phông chữ Ubuntu trong thẻ <head>, nhưng khi nó bật ra, phông chữ Ubuntu hiển thị chính xác trong văn bản thông thường, nhưng để lừa này hoạt động trong SVG, tập lệnh Google phải được nhúng trong chính SVG. Điều này có thể giải quyết như thế nào?Có cách nào để nhúng tập lệnh Phông chữ web của Google vào tệp SVG không?

Here's a link vào tệp SVG được đề cập.

Trả lời

11

Đây là một example sử dụng một vài webfont khác nhau bên trong SVG.

Phiên bản hiện tại của tập lệnh được phông chữ web google cung cấp không hoạt động trong svg. Nó sẽ rất dễ dàng cho google để sửa chữa mặc dù.

Dưới đây là một số ví dụ sử dụng phông chữ web google trong svg với các phương pháp khác được đề cập:

+0

Tại sao Google vô dụng để làm cho tập lệnh phông chữ web tương thích với SVG? – Jules

+2

Không có gì vô nghĩa cả, tôi nghĩ rằng nó sẽ rất hữu ích nếu kịch bản phông chữ google làm việc cho svg và html như nhau. Nó không liệt kê xml-stylesheets như một cách để bao gồm các phông chữ. –

2

Tôi không nghĩ rằng điều này thực sự hiệu quả đối với SVG được liên kết, ví dụ: here is the Firefox bug. Nó không có tác dụng nếu bạn inline the SVG in the HTML và sau đó tạo các quy tắc CSS như thế này:

svg .text { 
    font-family:"Familiar Pro Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-style:normal; 
} 

Tất nhiên, đây chỉ là đi làm việc trong các trình duyệt có khả năng HTML5. Here's an example.

+0

Đó là thiên tài. Cảm ơn! – Jules