Vì sao phông chữ SVG thay đổi sau khi xuất hoặc nhập

Phông chữ SVG thay đổi vì văn bản SVG còn chỉnh được thường chỉ ghi tên phông; nó không tự động mang hình dáng các chữ của phông đó trong tệp. Nếu trình duyệt, trình chỉnh sửa, phần mềm cắt hoặc máy tính người nhận không dùng được phông đã đặt tên, nó chọn phông dự phòng. Độ rộng ký tự khác nhau sau đó làm thay đổi ngắt dòng, căn chỉnh và vị trí thiết kế lân cận.

Có hai chiến lược bàn giao đáng tin cậy. Giữ văn bản còn chỉnh được khi nơi sử dụng cần các từ có thể chọn, tìm kiếm hoặc chỉnh sửa và bạn có thể cung cấp phông đúng cách. Chuyển chữ thành đường dẫn vector khi diện mạo phải cố định và không còn cần sửa nội dung chữ. Trong cả hai trường hợp, giữ một bản gốc có thể chỉnh sửa riêng.

Với xuất PNG tự động, hãy nạp tường minh các tệp phông trong resvg và so sánh chữ được dựng với nguồn trước khi bàn giao.

Với hình trong tài liệu, so sánh minh họa SVG và nhãn được dàn chữ trong LaTeX. Tách hình học bản vẽ khỏi chữ nhãn giúp tài liệu tự dàn chữ trong khi bạn giữ bản SVG gốc.

Trước hết, xác định SVG còn chứa văn bản hay không

Phần mở rộng tệp không trả lời được điều này. SVG có thể biểu diễn chữ bằng ít nhất hai cách phổ biến:

<text font-family="Example Sans" font-weight="600">Sample</text>

Đó là văn bản còn chỉnh được. SVG lưu ký tự và chỉ dẫn kiểu dáng. Bộ dựng hình phải tìm phông phù hợp để biến các ký tự thành hình chữ nhìn thấy.

Chữ đã chuyển thành đường dẫn vector trông giống thế này hơn:

<path d="M ... Z" />

Ở đây, mỗi chữ đã được chuyển thành hình học vector. Người nhận không cần phông, nhưng từ đó không còn là chuỗi văn bản thông thường có thể chỉnh sửa.

Bạn có thể kiểm tra mà không cần hiểu toàn bộ mã:

1. tạo bản sao SVG;
2. mở bản sao trong trình chỉnh sửa văn bản thuần;
3. tìm <text và <tspan;
4. tìm tên hiển thị của phông;
5. nếu không có, kiểm tra xem chữ có được dựng bằng phần tử <path> không.

Trong trình chỉnh sửa vector, dùng công cụ văn bản và nhấp vào một chữ. Con trỏ chữ nhấp nháy cho biết đó là văn bản còn chỉnh được. Nút quanh từng ký tự cho biết đó là đường dẫn vector.

Ba trạng thái kiểu chữ

Nguyên nhân 1: phông dự định dùng chưa được cài

Thuộc tính font-family của SVG là danh sách tên họ phông theo thứ tự ưu tiên. Như tài liệu font-family SVG của MDN giải thích, bộ dựng hình chọn từ danh sách đó. Nếu không khớp họ đầu tiên, nó chuyển sang họ tiếp theo và cuối cùng đến họ chung như sans-serif hoặc serif.

Điều này thường xảy ra khi:

• nhà thiết kế dùng phông cục bộ mà người nhận không có;
• phông được kích hoạt qua dịch vụ đăng ký chỉ trên một máy;
• SVG chuyển từ trình chỉnh sửa máy tính sang điện thoại, máy tính bảng, ứng dụng cắt hoặc bộ ứng dụng văn phòng;
• tên họ bên trong phông khác tên tệp hoặc tên hiển thị trong thư mục tải xuống;
• chỉ một kiểu được cài, trong khi SVG yêu cầu độ đậm hoặc kiểu nghiêng khác.

Cài “phông tương tự” không khôi phục bố cục. Hai phông không chân có thể khác độ rộng chữ, phần vươn cao, khoảng cách cặp chữ và thông số đường cơ sở. Phông thay thế có thể trông gần giống nhưng vẫn đẩy từ được căn giữa khỏi vị trí dự định. Khi phông dự định đã có sẵn, ví dụ căn dọc văn bản SVG giúp phân biệt vị trí đường cơ sở với căn giữa khung chữ và căn giữa theo thị giác.

Nguyên nhân 2: SVG cần phông web nhưng phông không tải được

SVG dùng trong trang web có thể nhận phông từ CSS của trang. Nó cũng có thể chứa khối kiểu với quy tắc @font-face; SVG 2 yêu cầu hỗ trợ phông tải xuống qua mô hình CSS Fonts. Cách này thất bại khi URL phông sai, tệp chưa được triển khai, truy cập bị chặn, định dạng yêu cầu không được hỗ trợ hoặc SVG được mở riêng thay vì trong trang cung cấp kiểu dáng.

Dùng công cụ dành cho nhà phát triển của trình duyệt và tải lại trang. Trong bảng Network, lọc tệp phông và tìm yêu cầu thất bại. Trong kiểu tính toán của phần tử <text>, xác nhận phông thực sự được dùng thay vì tin tên họ đã khai báo.

SVG chỉ hoạt động khi nhúng trong một website không nhất thiết là tệp bàn giao tự chứa đầy đủ. Thử SVG xuất ra trực tiếp trong cửa sổ trình duyệt riêng tư và trên thiết bị khác. Việc đó làm lộ phụ thuộc ẩn vào dịch vụ phông đang đăng nhập, phông lưu đệm hoặc bảng kiểu của website.

Nhúng tài nguyên phông có thể giúp SVG web dễ chuyển hơn, nhưng làm tăng kích thước tệp, có thể gặp giới hạn hỗ trợ riêng của ứng dụng và phải được giấy phép phông cho phép. Kiểm tra giấy phép thực tế thay vì cho rằng giấy phép máy tính cho phép phân phối lại dữ liệu phông.

Nguyên nhân 3: họ phông hoặc độ đậm không khớp chính xác

CSS khớp phông dựa trên nhiều thứ hơn nhãn họ phông nhìn thấy. SVG có thể yêu cầu:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Nếu tệp có sẵn chỉ chứa độ đậm 400 và 700, bộ dựng hình có thể tạo độ đậm giả hoặc chọn kiểu gần nhất. Phông biến thiên thêm các trục và tên phiên bản mà ứng dụng nhập có thể hiểu khác đi. Phần mềm thiết kế hoặc cắt cũ có thể bỏ qua một số tính năng OpenType, chữ ghép hoặc thiết lập biến thiên.

Kiểm tra tài liệu gốc và SVG cạnh nhau:

• tên họ phông chính xác;
• kiểu và độ đậm dạng số;
• khoảng cách chữ;
• cách viết hoa và ký tự thực tế;
• tính năng OpenType như chữ ghép;
• giá trị trục phông biến thiên;
• cách chữ chạy theo đường dẫn hoặc chữ dọc.

Đừng sửa họ phông không khớp bằng cách tự co giãn từng từ. Điều đó che triệu chứng nhưng vẫn giữ hình chữ sai.

Nguyên nhân 4: khi xuất vẫn giữ văn bản, nhưng ứng dụng nhập xử lý khác

Bố cục chữ SVG không giống hoàn toàn tài liệu chế bản trên máy tính. Công cụ xuất có thể dùng phần tử <tspan> lồng nhau, tọa độ riêng, text-anchor hoặc <textPath>. Ứng dụng nhập có thể gộp phẳng, nhóm lại hoặc hiểu lại các tính năng đó. Nếu đang dựng lại huy hiệu, hướng dẫn chữ SVG có thể chỉnh sửa chạy theo đường dẫn tách biểu tượng, đường cong hướng dẫn và chữ còn chỉnh được để bạn thử từng phần.

Để đặt trong tài liệu, làm theo quy trình hình SVG và thiết kế nội dòng trong Typst. Giữ chú thích bằng văn bản gốc của tài liệu giúp kiểm tra chữ trong minh họa riêng với đánh số hình và kiểu chữ đoạn văn.

Tài liệu xuất SVG hiện tại của Adobe lưu ý đầu ra chữ theo đường dẫn có thể không giữ diện mạo giống nhau trong mọi trình xem SVG. Tài liệu cũng phân biệt đầu ra dùng phông với Convert To Outlines, chuyển chữ thành đường dẫn vector để giữ diện mạo.

Nếu đúng phông đã có nhưng vị trí vẫn thay đổi, hãy kiểm tra cấu trúc thay vì đổi kiểu chữ:

1. so sánh bản dựng trong trình duyệt với trình chỉnh sửa nguồn;
2. kiểm tra mỗi ký tự có vị trí x riêng không;
3. kiểm tra phép biến đổi lồng nhau trên nhóm chữ;
4. xem công cụ nhập có xóa text-anchor, khoảng cách cặp chữ hoặc thiết lập đường cơ sở không;
5. thử bản sao dùng chữ ngang thông thường để cô lập cách xử lý chữ theo đường dẫn.

Với logo, huy hiệu hoặc tiêu đề một dòng mà diện mạo quan trọng hơn khả năng chỉnh sửa, đường dẫn vector thường là dạng bàn giao an toàn hơn.

Nguyên nhân 5: bạn chuyển chữ thành đường dẫn vector và mong nó vẫn chỉnh như chữ được

Chữ dạng đường dẫn vector không thể bị thay phông vì không còn tham chiếu phông. Nó vẫn có thể gây bất ngờ khi nhập:

• các chữ có thể thành đường dẫn phức hợp thay vì một từ có thể chỉnh sửa;
• khoảng rỗng trong chữ có thể bị tô kín nếu giải phóng đường dẫn phức hợp;
• nhiều ký tự có thể được nhóm chung;
• ứng dụng đích có giới hạn có thể gộp hoặc đơn giản hóa đường dẫn;
• tệp có thể lớn hơn bản văn bản còn chỉnh được.

Đó là thay đổi về hình học và khả năng chỉnh sửa, không phải thay đổi phông. Nếu hình dáng khớp nguồn, việc xuất đường dẫn vector đã hoàn thành nhiệm vụ.

Luôn giữ hai tệp:

• Bản gốc có thể chỉnh sửa: văn bản còn chỉnh được, thông tin phông gốc, lớp có tên và định dạng ứng dụng nguồn.
• Bản bàn giao: SVG, EPS hoặc PDF có chữ dạng đường dẫn vector cho trường hợp diện mạo phải chính xác.

Đừng chuyển chữ thành đường dẫn vector trong bản gốc duy nhất. Sửa chính tả, dịch thuật hoặc thêm khẩu hiệu mới sẽ thành việc vẽ lại thủ công chậm chạp khi chữ đã là đường dẫn.

Bạn nên dùng cách sửa nào?

Nơi sử dụng quyết định sự đánh đổi. Văn bản còn chỉnh được giữ ý nghĩa và khả năng sửa. Đường dẫn vector giữ diện mạo. Một tệp không thể tối đa hóa cả hai mà không mang thêm phụ thuộc hoặc dữ liệu nguồn.

Quy trình chuyển chữ thành đường dẫn vector an toàn

Với bàn giao cần diện mạo chính xác:

1. lưu tài liệu nguồn với văn bản còn chỉnh được;
2. nhân bản và thêm -outlined hoặc -delivery vào tên tệp;
3. chọn chữ và dùng Create Outlines, Convert to Curves, Object to Path hoặc lệnh tương đương;
4. kiểm tra lỗ trong chữ và hình chồng lấn;
5. xuất SVG;
6. mở SVG trong trình duyệt và trình chỉnh sửa thứ hai;
7. so sánh với nguồn ở kích thước bình thường và khi phóng lớn;
8. gửi tệp đường dẫn vector, đồng thời lưu trữ bản gốc còn chỉnh được và thông tin giấy phép phông.

Đừng raster hóa chữ chỉ để tránh thiếu phông. PNG trong SVG ngăn thay phông nhưng làm mất hình học đường dẫn có thể co giãn. Chuyển thành đường dẫn vector giữ vector thật.

Nếu logo duy nhất còn lại là ảnh raster

Đôi khi cả văn bản còn chỉnh được lẫn bản gốc đường dẫn vector đều không còn. Bạn có thể chỉ có PNG, JPG nhỏ hoặc ảnh chụp màn hình logo. Hướng dẫn quyết định vector hóa logo giải thích khi nào nên đồ lại raster và khi nào nên vẽ lại. Cài phông không sửa được raster, và xác định kiểu chữ tương tự có thể không tái tạo những chỉnh sửa chữ riêng.

Đây là nơi PerfectVector có thể giúp với điều kiện phù hợp: vector hóa logo có thể dựng lại chữ nhìn thấy trong raster thành hình vector. Kết quả là thiết kế dạng đường dẫn vector, không phải văn bản còn chỉnh được được khôi phục. Nó không xác định phông gốc, khôi phục thiết lập khoảng cách cặp chữ hay khiến nội dung có thể gõ lại. Dùng nó để khôi phục hình học logo nhìn thấy, rồi giữ bản dựng lại riêng với bất kỳ bản gốc dàn chữ mới nào.

Để có chiến lược bàn giao rộng hơn, hướng dẫn định dạng tệp logo giải thích nên giữ các định dạng gốc và bàn giao nào.

Câu hỏi thường gặp

Vì sao SVG dùng phông khác trên máy tính khác? SVG có lẽ chứa văn bản còn chỉnh được ghi tên phông không có trên máy tính kia. Bộ dựng hình thay bằng họ khác trong danh sách dự phòng, làm thay đổi hình chữ, độ rộng, khoảng cách và đôi khi cả căn chỉnh.

SVG có tự động nhúng phông không? Không. SVG có thể ghi tên phông, nhận phông từ CSS trang hoặc chứa tài nguyên phông, nhưng văn bản thông thường còn chỉnh được không tự đóng gói tệp phông trên máy tính. Bạn vẫn cần xử lý tính sẵn có, hỗ trợ trình duyệt và giấy phép phông.

Tôi có nên chuyển chữ SVG thành đường dẫn vector không? Chuyển bản bàn giao thành đường dẫn vector khi diện mạo phải cố định, đặc biệt với logo, chữ trang trí, in ấn và phần mềm chế tác. Giữ văn bản còn chỉnh được trong bản gốc khi nội dung chữ, hỗ trợ tiếp cận, khả năng tìm kiếm hoặc bản địa hóa quan trọng.

Vì sao chữ dạng đường dẫn vector không còn chỉnh như chữ được sau khi nhập? Chuyển thành đường dẫn vector thay ký tự bằng đường dẫn vector. Người nhận có thể chỉnh nút và hình nhưng không đặt con trỏ chữ hay đổi phông được. Đây là hành vi đúng, nên giữ và chia sẻ bản gốc có văn bản còn chỉnh được khi cần thay đổi nội dung trong tương lai.

PerfectVector có thể khôi phục phông gốc từ logo raster không? Không. PerfectVector có thể dựng lại chữ raster nhìn thấy thành đường dẫn vector, nhưng không xác định phông gốc hay khôi phục ký tự có thể chỉnh sửa, khoảng cách cặp chữ và thiết lập phông. Dùng nó khi mục tiêu là khôi phục hình học nhìn thấy của logo.

Nguồn

1. W3C — Văn bản SVG — nội dung <text> và <tspan> còn chỉnh được, thuộc tính phông, bố cục và hỗ trợ phông tải xuống.
2. W3C — Mô-đun CSS Fonts cấp 3 — khớp họ phông, chọn kiểu, họ phông thiếu và phông dự phòng hệ thống.
3. MDN — SVG font-family — danh sách họ phông ưu tiên và phông dự phòng chung trong SVG.
4. Adobe Illustrator — Tạo chữ dạng đường dẫn vector — chuyển chữ thành đường dẫn và mất khả năng chỉnh sửa dưới dạng văn bản.
5. Adobe Illustrator — Lưu thiết kế — xuất chữ SVG, đường dẫn vector và lưu ý tương thích chữ theo đường dẫn.

Khi bản gốc thất lạc khiến bạn chỉ còn logo raster, hãy dựng lại chữ nhìn thấy thành đường dẫn vector bằng PerfectVector, rồi kiểm chứng hình trong trình chỉnh sửa thứ hai. Nếu văn bản còn chỉnh được vẫn có, sửa phụ thuộc phông hoặc chuyển bản bàn giao thành đường dẫn vector thay vì đồ lại.