Trình tạo nét chữ CSS

Nguồn gốc của CSS text stroke

Ý tưởng tô viền glyph đã có trước CSS hàng thập kỷ; nó bản địa của PostScript (Adobe, 1984) và được chuyển vào SVG 1.1 (Khuyến nghị W3C, phiên bản thứ 2, 16 tháng 8 năm 2011), định nghĩa các thuộc tính sơn stroke, stroke-width, stroke-linecap và stroke-linejoin cho mọi hình dạng bao gồm <text>. CSS có phiên bản riêng khi Apple phát hành -webkit-text-stroke trong Safari 3 vào tháng 6 năm 2007, cùng với -webkit-text-fill-color. Thuộc tính chưa bao giờ được chuẩn hóa trong bất kỳ thông số kỹ thuật W3C nào đã phát hành; nó tồn tại trong Editor's Draft của CSS Text Decoration Module Level 4 dưới dạng text-stroke không có tiền tố, nhưng đến năm 2026 tên không có tiền tố vẫn chưa được kích hoạt trong bất kỳ trình duyệt nào. Firefox 49 (20 tháng 9 năm 2016) và Edge 15 (5 tháng 4 năm 2017) đều đã thêm -webkit-text-stroke làm bí danh tương thích web rõ ràng để xử lý các trang chỉ sử dụng tên có tiền tố WebKit. Trong sản phẩm, hãy viết tiền tố.

Ba cách để tô viền văn bản trên web

Có nhiều hơn một cách để vẽ đường viền xung quanh văn bản. Công cụ phù hợp phụ thuộc vào chiều rộng, ngân sách khả năng đọc và liệu các glyph cơ bản có cần giữ sắc nét hay không:

• -webkit-text-stroke, thuộc tính mà trình tạo này tạo ra. Một dòng CSS, được kết hợp bằng GPU, miễn phí ở bất kỳ tốc độ khung hình nào. Đường viền được vẽ tập trung vào đường viền glyph, một nửa bên trong và một nửa bên ngoài, có nghĩa là các đường viền dày bắt đầu ăn vào hình dạng chữ cái.
• text-shadow bốn hướng, dự phòng phổ quát hoạt động trong mọi trình duyệt trở về IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; xếp chồng bốn bóng 1 pixel ở mỗi góc để giả lập một đường viền 1 px. Được định nghĩa trong CSS Text Decoration Module Level 3 (Khuyến nghị Ứng cử viên W3C tháng 8 năm 2019). Ở các đường viền rộng hơn, các tạo phẩm bậc thang trở nên rõ ràng; tám hoặc mười sáu hướng có thể làm mịn chúng với chi phí của nhiều bóng hơn.
• SVG <text> với paint-order: stroke fill;, câu trả lời chính xác khi bạn cần đường viền dày mà không có mực chảy vào bên trong hình dạng chữ. Thuộc tính paint-order vẽ đường viền trước, sau đó là fill trên cùng, vì vậy fill giữ ở chiều rộng quảng cáo đầy đủ.

Khả năng tiếp cận: logic độ tương phản, body-text không, trang trí có

Tiêu chí thành công WCAG 2.1 1.4.3 «Độ tương phản (Tối thiểu)» (Khuyến nghị W3C 5 tháng 6 năm 2018) yêu cầu độ tương phản 4,5:1 cho văn bản thông thường và 3:1 cho văn bản lớn (18 pt / 14 pt đậm). Với một đường viền được áp dụng, cạnh chiếm ưu thế trực quan của glyph là màu đường viền, vì vậy kiểm tra độ tương phản phải so sánh màu đó với nền, không phải fill. Một thất bại phổ biến: một logo màu vàng trên nền trắng với một đường viền đen mỏng vượt qua nếu bạn kiểm tra đen so với trắng, nhưng phần thân của chữ là vàng trên trắng và đọc kém ở kích thước nhỏ. Đường viền phá hủy khả năng đọc trên body-text. Dưới kích thước phông chữ 16 px, đường viền 1 px lấp đầy 10 đến 15 phần trăm bên trong glyph và đường viền 2 px có thể đóng các counter (các lỗ trong «a», «e», «o»). Dành text stroke cho tiêu đề, kiểu chữ hiển thị và sử dụng trang trí; không bao giờ áp dụng nó cho văn bản đoạn văn mà không có thử nghiệm rõ ràng tại mỗi điểm dừng.

Khi nào text stroke là công cụ phù hợp

• Tiêu đề truyện tranh và giao diện trò chơi: kiểu cổ điển Marvel / Nintendo đường viền đen đậm trên nền tươi sáng.
• Hình mờ và lớp phủ trang trí: chỉ có đường viền bán trong suốt, không có fill, ngồi trên hình ảnh.
• Đồ họa hướng dẫn, ảnh chụp màn hình, chú thích nơi văn bản phải nổi bật trên nền không xác định.
• Nút «ma» nơi văn bản nút sử dụng đường viền và fill trong suốt để cảm thấy phù hợp về trọng lượng với chính nút có viền.
• Tiêu đề chỉ có đường viền trong thiết kế biên tập, kiểu «chữ cái rỗng» rất lớn vào cuối những năm 2010.

Sai lầm phổ biến

• Quên tiền tố -webkit-. text-stroke không có tiền tố chỉ ở trạng thái Editor's Draft và chưa được vận chuyển. Luôn viết hình thức có tiền tố trong sản phẩm.
• Cố gắng làm động -webkit-text-stroke-width. Nó không nằm trong danh sách các thuộc tính CSS có thể làm động. Các chuyển tiếp sẽ «bắt» thay vì tween. Làm động text-shadow hoặc sử dụng SVG khi cần chuyển động.
• Áp dụng đường viền cho văn bản nhỏ. Dưới 16 px, đường viền lấp đầy bên trong glyph và đóng counter. Đặt một bộ bảo vệ cỡ chữ tối thiểu bằng truy vấn phương tiện.
• Kết hợp đường viền rộng với letter-spacing chặt. Đường viền cắt qua giữa các glyph liền kề và tạo ra các vết bẩn xám nơi các hình dạng chạm vào nhau.
• Đếm màu đường viền là «màu văn bản» trong kiểm tra độ tương phản. Cả fill và đường viền đều phải vượt qua WCAG 1.4.3 so với nền.
• Không thử nghiệm biểu định kiểu in. Đường viền có thể được kết xuất dày hoặc mỏng hơn đáng kể khi in, đặc biệt trên các trình duyệt giảm tỷ lệ gamut màu cho đầu ra PDF.

Thêm câu hỏi thường gặp

Tại sao đường viền của tôi trông dày hơn trên màn hình Retina so với màn hình 1080p?

Không phải vậy, tính bằng pixel CSS. Đường viền 2px chính xác là 2 pixel CSS trên cả hai. Cái thay đổi là độ sắc nét cảm nhận: trên màn hình Retina (DPR 2×), đường viền 2 pixel CSS là 4 pixel thiết bị và khử răng cưa sạch sẽ. Trên màn hình 1×, 2 pixel thiết bị cho cạnh mờ hơn đáng kể. Nếu bạn cần một đường tóc bám vào một pixel thiết bị trên Retina, hãy viết 0.5px; trình duyệt làm tròn đến một pixel thiết bị trên màn hình DPR cao.

Tôi có thể có một màu đường viền khác cho mỗi chữ cái không?

Không phải với một khai báo -webkit-text-stroke duy nhất. Hoặc bọc từng chữ cái trong một <span> và tạo kiểu riêng lẻ, hoặc sử dụng các phần tử SVG <tspan> với thuộc tính stroke riêng của chúng. Pseudo-element ::first-letter chấp nhận text-stroke nếu bạn chỉ cần chữ cái đầu tiên khác biệt.

Đường viền dày đến mức nào là quá dày?

Trần thực tế là khoảng 8 phần trăm của cỡ chữ. Ở 100 px phông chữ, đó là 8 px đường viền; vượt ra ngoài đó các chữ cái bắt đầu chồng lên nhau. Nếu bạn muốn một hình ảnh đường viền dày hơn, sử dụng SVG <text> với paint-order: stroke fill; để fill giữ ở chiều rộng ban đầu và đường viền chỉ mở rộng ra ngoài.

-webkit-text-stroke có hoạt động trên emoji không?

Trên emoji màu (mặc định trong trình duyệt hiện đại), đường viền áp dụng cho hình bóng bên ngoài của glyph emoji. Kết quả thường tinh tế vì emoji đã có đường viền và đổ bóng riêng. Đối với emoji đen trắng (biến thể phông chữ text), đường viền áp dụng sạch sẽ như bất kỳ glyph nào khác.

Có gì được gửi đến máy chủ không?

Không. Văn bản bạn gõ vào bản xem trước, màu sắc bạn chọn và CSS được tạo đều được xử lý trong JavaScript của trình duyệt của bạn. Không có cuộc gọi mạng nào được thực hiện. Mở tab Mạng trong DevTools để xác minh.