Giữ nguyên kiểu phông chữ trong tệp SVG của họa sĩ minh họa

Xin chào Tôi mới làm quen với họa sĩ minh họa và đã tạo một hình ảnh sử dụng phông chữ "Skia-Thường xuyên". Nhưng khi tôi lưu hình ảnh đó ở định dạng .svg , nó sẽ thay đổi loại phông chữ. Và khi tôi mở tệp định dạng .svg trong trình duyệt thì phông chữ hoàn toàn khác. Bất cứ ai có thể xin vui lòng cho tôi biết những gì tôi đang làm sai. Tôi cũng đã mở tệp .svg trong notepad ++ và nó nói font-family = "'Skia-Thường xuyên" cũng như phông chữ không phải là Skia Thường xuyên. Mọi trợ giúp đều được đánh giá cao. Cảm ơn

Hình ảnh cũng được đính kèm để tham khảo

Nếu bạn muốn chắc chắn rằng văn bản sẽ có diện mạo giống nhau trong mọi trường hợp -

Đầu tiên, bạn có thể Mở rộng văn bản trước khi lưu dưới dạng svg

Thứ hai, trong phần phông chữ của hộp thoại lưu, bạn có thể nhấn "convert to phác thảo"

Lý do tại sao phông chữ không hiển thị chính xác cho loại phông chữ thực tế là bởi vì, khi SVG được lưu bằng ứng dụng Illustrator. Ứng dụng tự động chuyển đổi thiết kế thành mã. Và nếu quan sát kỹ tên phông chữ trong mã không khớp với phông chữ thực được cài đặt trong hệ thống.

Để khắc phục vấn đề kết xuất phông chữ, bạn sẽ cần sao chép mã SVG từ Illustrator và sửa đổi tên phông chữ để khớp với tên của phông chữ được cài đặt trong hệ thống của bạn. . ".)

Điều này sẽ giải quyết vấn đề của bạn mà không cần phải chuyển đổi phông chữ để phác thảo.

Hi vọng điêu nay co ich!

Như bạn đã lưu ý, kiểu chữ là một tham chiếu đến tệp phông chữ có thể (hoặc có thể không) có sẵn cho hệ thống cố gắng mở svg. Giải pháp là chuyển đổi loại của bạn thành các đường dẫn để các đường cong được lưu trữ rõ ràng trong tệp.

Về lý do tại sao trình duyệt có thể không nhận biết khuôn mặt phông chữ mà bạn đang cố gắng tham chiếu, điều đó không rõ ràng vì tôi cho rằng bạn đang thử nghiệm trên cùng một máy tính mà bạn đã sử dụng trong khi tạo tệp svg. Điều hợp lý là phông chữ có thể chọn trong Illustrator nhưng không được cài đặt chính thức ở cấp độ HĐH.

lưu trữ cho web:

1. sử dụng phông chữ google.
2. chỉ sử dụng tối đa hai họ phông chữ.

Xuất: phông chữ: (văn bản: svg, subconjunto: none). thuộc tính svg: (yếu tố phong cách).

trong các kiểu của tệp kết quả, chỉnh sửa nó:

1. đính kèm dòng "@import".
2. đính kèm "px" cho tất cả các cỡ chữ.
3. đổi tên tên phông chữ.

kết quả:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

Có thể PC của bạn không có tệp phông chữ họ (Skia-Thường xuyên) có sẵn tại địa phương. Vì vậy, khi bạn mở tệp SVG trên trình duyệt của mình, nó sẽ hiển thị bằng phông chữ hệ thống mặc định hầu hết là Times New Roman. Có một số cách giải quyết:

1. Sử dụng @import để tham khảo API Google Fonts (nhưng điều thú vị là, tùy thuộc vào cách bạn nhúng hình ảnh SVG trên trang web của mình, điều này chỉ hoạt động tốt nếu bạn đang sử dụng SVG nội tuyến & thẻ đối tượng SVG)
2. Chuyển đổi phông chữ của bạn thành đường dẫn (làm tăng kích thước tệp của bạn và dẫn đến văn bản bị mờ khi bạn mất kết xuất ClearType )
3. Nhúng phông chữ vào tệp SVG của bạn bằng Nano

Bạn có thể đọc thêm về cách sử dụng phông chữ tùy chỉnh trong SVG tại đây: https://css-tricks.com/USE-custom-fonts-with-svg-in-an-image-tag/