Fonts chữ trên web về cơ bản là đồ họa dựa trên vector. Đó là lý do tại sao bạn có thể hiển thị chúng ở 12px hoặc 120px và chúng vẫn sắc nét và tương đối sắc nét. Vector có nghĩa là hình dạng của chúng được xác định bởi các điểm và toán học để mô tả hình dạng, chứ không phải dữ liệu pixel thực tế.
Bởi vì chúng là vectơ, sẽ rất hợp lý nếu chúng ta có thể làm những điều mà các chương trình vectơ khác (ví dụ: Adobe Illustrator) có thể làm với văn bản vectơ, chẳng hạn như vẽ một nét xung quanh các ký tự riêng lẻ.
Ví dụ:
h1 {
/* thêm stroke text */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}Hoặc có thể viết tắt
h1 {
-webkit-text-stroke: 1px black;
}Bạn có thể nghĩ “Tuyệt, nhưng nếu chỉ một số trình duyệt hỗ trợ điều này, nếu tôi đặt màu văn bản của mình thành màu trắng và nền của tôi là màu trắng, nét vẽ sẽ làm cho nó trông bắt mắt trong các trình duyệt hỗ trợ nhưng hoàn toàn biến mất trong các trình duyệt không hỗ trợ!”
Hoặc như thế này:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}Được hiển thị ở đây với Fonts chữ @ font-face Anime Ace 2 của Nate Piekos:
Một cách khác để thêm Stroke với các tùy chọn Support
@supports (-webkit-text-stroke: 1px black) {
h1 {
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: white;
}
}
Mô phỏng
Chúng ta có thể thực hiện điều này xa hơn một chút bằng cách không hoàn toàn dựa vào độc quyền của WebKit. Chúng ta có thể sử dụng thuộc tính text-shadow (cũng được hỗ trợ trong Firefox, Opera và IE 10) và mô Fonts một nét vẽ.
Chúng tôi sẽ sử dụng bốn bóng đổ, mỗi bóng đen có độ lệch 1px không có độ chênh lệch, mỗi bóng ở trên cùng bên phải, trên cùng bên trái, dưới cùng bên trái và dưới cùng bên phải.
Chúng tôi sẽ xóa -webkit-text-fill-color độc quyền của WebKit để ưu tiên màu sắc vì chúng tôi hiện tương thích với nhiều trình duyệt. Phần giữ lại duy nhất sẽ là IE9 trở xuống, tất nhiên bạn có thể sử dụng các bảng định kiểu dành riêng cho IE để tính toán.
h1 {
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Kết hợp
Sử dụng cả nét vẽ và bóng đổ có thể mang lại hiệu quả tuyệt vời. Hãy tung ra một nét vẽ WebKit, nét vẽ đổ bóng văn bản toàn diện, cũng như một nét vẽ đổ bóng văn bản sâu hơn.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}Ví dụ:
See the Pen Stroked Text with Alternatives by CSS-Tricks (@css-tricks) on CodePen.
Alignment
Nếu bạn đã quen thuộc với Adobe Illustrator, bạn có thể biết rằng bạn có thể căn chỉnh một nét ở bên trong của một hình dạng, bên ngoài hoặc căn giữa.
Vì những lý do mà tôi không biết, văn bản trong Illustrator cũng chỉ có thể được đặt thành căn chỉnh nét ở giữa. Tuy nhiên, khi bạn mở rộng văn bản thành các đường dẫn vectơ thông thường, cả ba tùy chọn đều có sẵn.
Đối với tôi, chỉ có căn chỉnh nét văn bản bên ngoài mới có vẻ tốt. Thật không may, đối với cả CSS và Illustrator, mặc định không thể thay đổi được căn giữa. Giải pháp là đừng quá điên cuồng với độ dày của đường viền nét vẽ của bạn và mọi thứ sẽ ổn. Lưu ý: giải pháp chỉ tạo bóng văn bản không có vấn đề này, nhưng cũng không thể vuốt quá 1px.
Những gì chúng tôi không thể làm
Có những thứ khác mà các chương trình đồ họa dựa trên vector có thể làm với văn bản. Bạn có thể thu nhỏ chữ cái theo chiều ngang / kéo dài chúng theo chiều dọc. Loại xử lý văn bản này hầu như được mọi người quan tâm, vì vậy không có gì mất mát lớn mà chúng tôi không thể làm điều đó. Bạn cũng có thể đặt kiểu trên một đường không đều (như xung quanh một vòng tròn). Chắc chắn sẽ rất tuyệt khi làm điều này với văn bản web. Có lẽ chúng ta có thể đặt văn bản theo đường viền của phần tử parent của nó.
p.circular {
width: 200px;
height: 200px;
border-radius: 100px;
text-align: border-path;
}Trong Illustrator, chúng ta cũng có thể cho một nét vẽ cách xử lý các góc nhọn: làm tròn, vát hoặc gấp mép. Những thứ này có thể có hiệu ứng đẹp, không thể có trên web. Tuy nhiên, việc xử lý các góc của WebKit khá đẹp ở chế độ mặc định (bất kể nó là gì) và được cho là đẹp hơn bất kỳ tùy chọn nào trong Illustrator.
Yêu thích
Đối với bản ghi, bạn có thể sử dụng bất kỳ loại giá trị màu nào cho màu của nét vẽ (hex, rgba, hsla, keyword). Điều đó có nghĩa là các nét vẽ trong suốt nếu bạn muốn, điều này thực sự “chồng chất” ở chỗ nếu các nét chồng lên nhau (thông thường) thì chúng sẽ tối hơn.
@keyframes colorchange {
0% {
-webkit-text-stroke: 10px red;
}
100% {
-webkit-text-stroke: 20px green;
}
}
