Thủ thuật css bóng văn bản

OS X, hệ điều hành Mac, có một công cụ hiển thị phông chữ khá tốt – nó tuân thủ chặt chẽ tỷ lệ phông chữ mong muốn để tạo ra hình ảnh của phông chữ trên màn hình mô tả chính xác những gì bạn sẽ thấy được in ra trên giấy

Một lời phàn nàn mà tôi thường đọc là đôi khi nó làm cho phông chữ hơi mờ hoặc quá mập – đặc biệt là khi chúng được in đậm. Điều này trở nên tồi tệ hơn khi phông chữ được tô màu sáng và đặt trên nền tối

Nếu bạn đang thiết kế trang web cho một lượng lớn người dùng Mac, bạn có thể sử dụng một thủ thuật CSS nhỏ để làm cho phông chữ đậm của bạn trông đẹp hơn. Điều này liên quan đến thuộc tính CSS “text-shadow” và sẽ chỉ hoạt động trong trình duyệt Safari

Hãy xem ảnh chụp màn hình sau. Dưới đây là ba phông chữ màu trắng được hiển thị trên nền màu xám đậm trong Safari. Tất cả các phông chữ được in đậm. Bạn có thể thấy rằng kết quả không rõ ràng lắm – màu trắng dường như tràn ra ngoài, làm mờ phông chữ

Bây giờ, hãy áp dụng thuộc tính “text-shadow” cho biểu định kiểu CSS. Tôi sẽ áp dụng bóng có cùng màu với nền và mọi thứ khác (vị trí và độ mờ) được đặt thành 0. Đây là mã

text-shadow: #333 0 0 0;

Đây là những gì chúng tôi nhận được

Tốt hơn nhiều. Cái bóng hình như đã xóa phông nhiều. Nó không còn tràn ra nhiều nữa mà vẫn đậm nét rõ ràng

Nếu thích, bạn có thể thử với thuộc tính bóng để có được một số hiệu ứng đẹp mắt. Ví dụ: hình ảnh sau đây hiển thị màu bóng được đặt thành màu đen, vị trí giảm xuống 1 pixel và độ mờ được đặt thành 0 (text-shadow. #000 0 1px 0;)

Điều này hiện sẽ chỉ hoạt động trên Safari – tuy nhiên, vì một tỷ lệ lớn (đa số?) Người dùng OS X sử dụng Safari làm trình duyệt chính của họ, nên theo ý kiến ​​​​của tôi, một dòng mã CSS đơn giản ở đây và ở đó đáng để sử dụng để nâng cao tổng thể

(Chỉnh sửa. 23 tháng 12 năm 2010) Phần trên không còn hoạt động đối với Safari (hoặc Chrome) trừ khi độ mờ của bóng tối được đặt thành ít nhất 1 pixel (e. g. "bóng văn bản. #333 0 0 1px;”)

Phông chữ 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. Vectơ có nghĩa là định dạng của chúng được xác định bởi các điểm và toán học để mô tả định dạng hình, chứ không phải dữ liệu pixel thực tế

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

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

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

Bởi vì họ là giám sát, sẽ rất hợp lý nếu họ có thể làm những điều mà các chương trình nhìn khác (ví dụ:. Adobe Illustrator) có thể làm với văn bản nhìn, mơ hồ 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 chương trình . ”

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 Đột quỵ với các tùy chọn Hỗ trợ

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

• Mô phỏng
• Kết hợp
• căn chỉnh
• Những điều chúng tôi không thể làm
• Yêu thích

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 quyền độc lập 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ô tả Phông chữ một nét vẽ

Chúng tôi sẽ sử dụng bóng đổ, mỗi bóng đen có độ lệch 1px không có độ 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 dạng dành riêng cho IE để tính toán

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

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

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ụ

Xem Văn bản có nét bút với các lựa chọn thay thế bằng CSS-Tricks (@css-tricks) trên CodePen

căn chỉnh

Nếu bạn đã thuộc về 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 nhìn 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 ngoài mới có vẻ tốt. Thật không thể, đối với cả CSS và Illustrator, mặc định không thể thay đổi được căn cứ giữa. Giải pháp là đừng quá phát điên với độ dày của đường viền nét vẽ của bạn và mọi thứ sẽ ổn định. 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 điều 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 vời khi làm điều này với web văn bản. Có lẽ chúng ta có thể đặt văn bản theo đường viền của phần tử cha của nó

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

Trong Illustrator, chúng tôi cũng có thể chọn một nét vẽ để xử lý các góc cạnh. làm tròn, vát hoặc gấp đôi. 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ự là “chồng chất” tại chỗ nếu các nét vẽ chồng lên nhau (thông thường) thì chúng sẽ tối ưu hơn