Nét chữ - Thủ thuật CSS

Anonim

text-strokelà thuộc tính thử nghiệm cung cấp các tùy chọn trang trí văn bản tương tự như các tùy chọn có trong Adobe Illustrator hoặc các ứng dụng vẽ vector khác. Nó hiện không được bao gồm trong bất kỳ thông số kỹ thuật W3C hoặc WHATWG nào. Kể từ tháng 6 năm 2013, nó chỉ được triển khai sau -webkittiền tố của nhà cung cấp, mặc dù các phiên bản tương lai của Firefox và Internet Explorer có thể hỗ trợ thuộc tính này (có thể là theo tiền tố của riêng chúng).

mark ( -webkit-text-stroke: 2px red; )

Các text-strokebất động sản thực sự là viết tắt cho hai thuộc tính khác:

  1. text-stroke-width, lấy giá trị đơn vị (1px, 0,125em, 4in, etcetera) và mô tả độ dày của hiệu ứng nét vẽ.
  2. text-stroke-color, nhận một giá trị màu (hex, rgb / rgba, hsl / hsla, etcetera).

text-strokecũng có thuộc tính đồng hành text-fill-color, thuộc tính này sẽ ghi đè thuộc colortính, cho phép dự phòng duyên dáng sang màu văn bản khác trong các trình duyệt không hỗ trợ text-stroke.

Kiểm tra cây bút này!

Điểm quan tâm

  • Nét vẽ bằng text-strokeđược căn chỉnh với tâm của hình dạng văn bản (như mặc định trong Adobe Illustrator) và hiện không có tùy chọn để đặt căn chỉnh bên trong hoặc bên ngoài của hình dạng. Thật không may, điều này làm cho nó ít sử dụng hơn nhiều, vì không có vấn đề gì bây giờ đột quỵ cản trở hình dạng của chữ cái phá hủy ý định của nhà thiết kế kiểu ban đầu. Một thiết lập sẽ là lý tưởng, nhưng nếu chúng ta phải chọn một thiết lập, thì nét vẽ bên ngoài sẽ hữu ích hơn nhiều.
  • trong Webkit, text-strokecó thể tạo hoạt ảnh với CSS Transitions và Animations - nhưng chỉ màu nét, không phải chiều rộng nét.
  • Một giá đỡ tương thích với trình duyệt hơn (và được cho là mạnh mẽ) cho text-strokehiệu ứng đang sử dụng text-shadow, được nêu trong bài viết CSS-Tricks này.

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
-webkit- -webkit- 21 15+ 10 Phức tạp -webkit-

Lưu ý về hỗ trợ trình duyệt: Bảng trên là tóm tắt về hỗ trợ tổng thể của trình duyệt text-stroke- sự thật là phức tạp hơn nhiều (ví dụ: Android đã hỗ trợ thuộc tính này trong các phiên bản 2.1-2.3, sau đó loại bỏ hỗ trợ trong 3.0, trước khi khôi phục hỗ trợ trong 4.0) . Để có bảng hỗ trợ trình duyệt đầy đủ, hãy truy cập caniuse.com/text-stroke.