Phông chữ CSS 3 của trình duyệt chéo

Question

Trên trang web của tôi, tôi đang sử dụng độ dốc văn bản cho tiêu đề, nhưng nó chỉ hoạt động trên Chrome và có thể là Safari (mặc dù tôi chưa thử nghiệm), bên dưới là mã tôi sử dụng cho gradient. Tôi đã tự hỏi liệu có một cách để đạt được cùng một/hiệu ứng tương tự mà sẽ làm việc trên tất cả 3 trình duyệt?

 background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 

EDIT: Vấn đề với các giải pháp khác đó là được đăng là nó chỉ hoạt động trên một nền trắng, như ai đó nói trong các ý kiến, đó là không tốt cho tôi khi tôi đang sử dụng một màu xám lý lịch.

Answer 1

Nếu bạn muốn điều này để làm việc trong các trình duyệt không WebKit, bạn cần phải sử dụng một giải pháp khác hơn là CSS.

Có một số giải pháp JavaScript ngoài đó hoặc bạn có thể sử dụng SVG.

Dưới đây là một bài đăng blog tốt về làm thế nào để làm điều đó: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Sử dụng JavaScript có nhược điểm của ... sử dụng JavaScript, nhưng ở phần cuối của ngày hôm nay chỉ là một hiệu ứng hình ảnh trang trí.

Answer 2

-moz-background-clip: văn bản không hoạt động trên firefox và bạn sẽ không thể đạt được hiệu ứng cắt trong Firefox.

Bạn có thể sử dụng cufon cho gradient văn bản, và Thầy sẽ làm việc trên IE, Chrome và Firefox