Hướng dẫn text-stroke css - text-stroke css

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ế.

Các bài viết liên quan:

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ụ:

h2 {
  /* thêm stroke text */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

Hoặc có thể viết tắt

h2 {
  -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:

h2 {
  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) {
  h2 {
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
  }
}

• Mô phỏng
• Kết hợp
• Alignment
• Những gì chúng tôi không thể làm
• Yêu thích

Mô phỏng

Kết hợp

Alignment

Những gì chúng tôi không thể làm

h2 {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

Kết hợp

Alignment

h2 {
   -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ụ:

Hoặc có thể viết tắt

Alignment

Những gì chúng tôi không thể làm

Yêu thích

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ẽ.

Những gì chúng tôi không thể làm

Yêu thích

p.circular {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: border-path;
}

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ẽ.

Yêu thích

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ẽ.

@keyframes colorchange {
  0% {
    -webkit-text-stroke: 10px red;
  }
  100% {
    -webkit-text-stroke: 20px green;
  }
}