Vì vậy, tôi có một chuỗi tự động hóa đồ họa đang hoạt động vui vẻ trên môi trường linux không đầu bằng cách sử dụng các chương trình SVG và PhantomJS được tạo ra / thay đổi theo chương trình (hiện là 1.9.0) như một công cụ kết xuất cuối cùng. Tôi có một số yêu cầu thay thế văn bản động và dẫn đến nhu cầu điều chỉnh và điều chỉnh phông chữ động ... Tôi đã sử dụng các phông chữ SVG nhúng và một số javascript nhúng nhúng, hoạt động tốt, ngoại trừ hai điều:
1) Máy khách có một số yêu cầu về phông chữ có chữ ghép (định dạng phông chữ SVG không hỗ trợ)
2) Chúng tôi đang thực hiện một tùy chọn xem trước trực tiếp và rất thích có thể phục vụ SVG lên trang web mà không cần hiển thị png / jpeg / bất cứ thứ gì trên máy chủ của chúng tôi trước khi sử dụng. giữ tải xuống, làm cho CPU của khách hàng thực hiện công việc nặng nhọc, tất cả chỉ có thế.
Vì những vấn đề này mà tôi đã giải quyết với các phông chữ WOFF, vì sự hỗ trợ cho các phông chữ SVG không bao giờ RẤT tốt, và bây giờ Chrome không hỗ trợ chúng nữa bằng cách chuyển sang công cụ Blink, nếu tôi muốn ứng dụng khách làm công việc của tôi Tôi cần một cái gì đó tương thích với càng nhiều trình duyệt phổ biến càng tốt ...
Vì vậy, đây là vấn đề: Tỷ lệ tự động của tôi thất bại thảm hại khi tôi sử dụng phông chữ WOFF (hoặc OFT hoặc TTF) và chức năng @ font-face.
những gì tôi đã làm chỉ là nhúng phông chữ SVG vào đồ họa của tôi trong defs và tham chiếu với DOM giống như bất kỳ phần tử SVG nào khác. Điều này thực hiện những điều tôi mong đợi và cần khi kết hợp với tập lệnh java như thế này:
<script id="multiscaler1" type="text/javascript">
var texta = document.getElementById("text8093");
var textb = document.getElementById("text8100");
var textpatha = document.getElementById("textPath8097");
var textpathb = document.getElementById("textPath8104");
var patha = document.getElementById("path8091");
var pathb = document.getElementById("path8089");
var charcounta = textpatha.getNumberOfChars();
var charcountb = textpathb.getNumberOfChars();
var fontsizea = 10;
var fontsizeb = 10;
var offseta = -13;
var offsetb = -13;
var spacing = 0;
while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) < patha.getTotalLength()) && (fontsizea < 43) )
{
fontsizea += .5;
offseta += 0.2
textpatha.setAttribute("font-size", fontsizea);
texta.setAttribute("transform", "translate(" + offseta + ",0)");
}
while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) < pathb.getTotalLength()) && (fontsizeb < 43) )
{
fontsizeb += .5;
offsetb += 0.2
textpathb.setAttribute("font-size", fontsizeb);
textb.setAttribute("transform", "translate(" + offsetb + ",0)");
}
</script>
Khá là tào lao, tôi biết, nhưng tôi là một giám đốc sản xuất và nghệ sĩ đồ họa, không phải là một lập trình viên: P và nó trông như thế này:
Đó là những gì tôi muốn ... (nhưng tất nhiên chỉ hoạt động trên các trình duyệt hỗ trợ phông chữ SVG ...)
Bây giờ, khi tôi thêm vẻ đẹp nhỏ bé này vào deffs của tôi
<style type="text/css">
@font-face {
font-family: Narrow-Bold;
src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>
và xóa dữ liệu phông chữ SVG tôi nhận được điều này:
Trời ơi. Điều đó không đúng chút nào. Tôi đã loay hoay với các giá trị khoảng cách của mình (có để xử lý tình huống khác khi tôi thay đổi khoảng cách ký tự để tối đa hóa kích thước phông chữ dựa trên độ dài chuỗi ...) và có thể khiến nó thực hiện điều này:
cũng khá sai: /
Những gì cho ở đây? Có ai giúp đỡ không? Thành thật mà nói, thật đáng yêu khi chuyển tất cả sang phông chữ WFFF (hoặc phông chữ OTF hoặc TTF được liên kết với khuôn mặt, phông chữ BTW, làm điều tương tự) vì tôi có ít hơn 20.000 dòng SVG mà không nhúng phông chữ nơi chết tiệt ...
Tôi đã thử các công cụ chuyển đổi phông chữ khác nhau và thậm chí một mẹo tôi tìm thấy trong một số kết quả tìm kiếm của google trong đó bạn xây dựng WOFF từ SVG, chứ không phải TTF hoặc OTF ... cùng kết quả.
??
Dưới đây là một ví dụ đơn giản về một SVG độc lập đang hoạt động với phông chữ SVG được nhúng bằng phông chữ Delicious Bold miễn phí . Rõ ràng điều này sẽ chỉ hoạt động trên một trình duyệt hỗ trợ phông chữ SVG. Phông chữ nhúng được tạo từ bản tải xuống mới của OTF với FontForge For Windows Release 2015-06-12 . Tôi cũng đã tạo một phiên bản WOFF có cùng phông chữtheo cùng một cách (tất cả các cài đặt mặc định, bỏ qua cảnh báo về "tiến bộ không theo tiêu chuẩn" trong định nghĩa TTF) và thêm một liên kết mặt chữ @ với một tên khác sẽ trỏ đến WOFF khi nó nằm trong cùng thư mục như SVG. Bằng cách chỉnh sửa font-face = "xxxxxx" trong phần tử text / textpath của SVG, bạn có thể nhanh chóng chuyển đổi giữa phông chữ SVG được nhúng, (hoạt động tốt) phông chữ WOFF được liên kết (tỷ lệ không chính xác) và phiên bản hệ thống của phông chữ gia đình, nếu được cài đặt (có lẽ cần lưu ý, biểu hiện hơi khác so với phông chữ SVG được nhúng, nhưng cũng có tỷ lệ chính xác)
Hành vi này phù hợp trên tất cả các trình duyệt đã được thử nghiệm (Opera mới nhất cho Windows 7 64bit, Mozilla-Ubuntu Linux mới nhất, Windows 7/8 64bit mới nhất, Safari 5.1.7 cho Windows (hỗ trợ phông chữ SVG) và PhantomJS 1.9.7 Linux CentOS 6.4 cuối cùng (hỗ trợ phông chữ SVG). Nó cũng nhất quán trên tất cả các phông chữ được thử nghiệm (nhiều ...) và các công cụ chuyển đổi phông chữ (phông chữ sóc, FontForge, Birdfont ...)
Vì SVG tự chứa quá lớn để dán vào cơ thể, đây là một liên kết đến nó được dán vào một dự án JSfiddle .
Vâng, tôi nhận ra rằng tôi có thể giải quyết điều này bằng cách kết xuất với batik Apache, nhưng: 1) Batik là slooooooooooooow. Sooooo sloooooooooooooooooooooooooow ... OMG là nó chậm. 2) Tôi muốn có thể giảm tải càng nhiều CPU từ máy chủ của mình càng tốt, REVERSE chính xác của những gì batik sẽ làm 3) Đó không phải là vấn đề, chết tiệt!