Stroke trong CSS

Cách thêm nét ngoài cho chữ. Tôi đã thử với -webkit-text-stroke. 10px màu đen;

Nội dung chính Hiển thị

p {
  color: #fff;
  text-shadow: -1px -1px 0 #844733, 1px -1px 0 #844733, -1px 1px 0 #844733, 1px 1px 0 #844733;
  
  font-size: 24px;
}

my text

đây là hình ảnh -> [1]. https. //tôi. cây rơm. imgur. com/5xMgn. png

Tôi muốn nét vẽ rất dày và chỉ nhô ra ngoài

đã hỏi 27 tháng 9 năm 2021 lúc 19. 52

Dự phòng về màu đồng nhất. Hiển thị ở đây trong Firefox

Một khả năng khác là chỉ áp dụng khi được hỗ trợ

@supports (-webkit-text-stroke: 1px black) {
  h2 {
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
  }
}

Hỗ trợ

máy tính để bàn

ChromeFirefoxIECạnhSafari4*49*Không15*3. 1*

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari105*104*2. 1*4. 0-4. 1*

mô phỏng

Chúng ta có thể tiến xa hơn một chút bằng cách không phụ thuộc hoàn toàn vào quyền sở hữu của WebKit. Chúng ta có thể sử dụng thuộc tính

my text

4 (cũng được hỗ trợ trong Firefox, Opera và IE 10) và mô phỏng một cú đánh. Chúng tôi sẽ sử dụng bốn bóng, mỗi bóng đen có độ lệch 1px không có độ lan rộng, 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 màu -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. Loại bỏ duy nhất sẽ là IE9 trở xuống, tất nhiên bạn có thể sử dụng các biểu định kiểu dành riêng cho IE để giải thích

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

Đây là một nét sử dụng tất cả text-shadow. Khá gần tốt như một cú đánh thực sự. Vấn đề chính là bạn chỉ có thể nhận được 1px nét vẽ theo cách này. Còn nữa, và bạn thấy những khoảng trống. Bất kỳ vấn đề nào nữa với nét chữ WebKit và cũng có vấn đề, vì vậy nó giống như một con ngựa

kết hợp

Sử dụng cả nét và bóng có thể là một hiệu ứng tuyệt vời. Hãy sử dụng nét vẽ WebKit, nét vẽ bóng văn bản xung quanh, cũng như nét vẽ bóng văn bản sâu hơn

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;
}

Nhìn tốt đấy

Thử nghiệm

căn chỉnh

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, bên ngoài hoặc ở giữa của một hình dạng. Tùy chọn đó trông như thế này trong bảng màu

Từ trái sang phải. trung tâm, bên trong, bên ngoài

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 chính 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 khả dụng. Lời nhắc từ Sam Frysteen. thêm một nét mới trong bảng Giao diện và di chuyển nó bên dưới văn bản của bạn (về cơ bản bắt chước căn chỉnh nét bên ngoài)

Từ đầu đến cuối. bên trong, trung tâm, bên ngoài

Chỉ căn chỉnh nét chữ bên ngoài có vẻ tốt với tôi. Thật không may, 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 thôi. Ghi chú. giải pháp chỉ có bóng văn bản không có vấn đề này, nhưng cũng không thể vuốt quá 1px

Nếu bạn sử dụng phần tử giả, bạn có thể tạo nét giống văn bản phía sau văn bản gốc và một nét giả bên ngoài.

Chúng tôi có hẳn một bài viết về vấn đề căn chỉnh này. Nét chữ. Bị mắc kẹt ở giữa với bạn. Một chút tin tốt, thuộc tính ________ 15 về cơ bản cho phép bạn có các nét bên ngoài, một khi nhiều trình duyệt hỗ trợ nó

Những gì chúng ta 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ể bóp chữ theo chiều ngang/kéo dài theo chiều dọc. Kiểu xử lý văn bản này hầu như không được mọi người tán thành, vì vậy không có gì mất mát lớn khi chúng tôi không thể làm điều đó. Bạn cũng có thể đặt loại 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 nếu 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 đi theo đường viền của phần tử cha của nó

my text

0

Trong Illustrator, chúng ta cũng có thể cho một nét vẽ xử lý các góc nhọn như thế nào. tròn, vát hoặc vát. 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 theo mặc định (bất kể nó là gì) và đẹp hơn bất kỳ tùy chọn nào trong Illustrator

tưởng tượng

Đố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 trong suốt nếu bạn muốn, điều này thực sự “xếp chồng” ở chỗ nếu các nét chồng lên nhau (phổ biến) thì chúng sẽ tối hơn

Đối với hoạt ảnh của khung hình chính, màu nét sẽ hoạt ảnh nhưng chiều rộng nét sẽ không (lạ)