In màu phông chữ màu xám

Question

Có cách nào để đảm bảo rằng các màu phông chữ xám của tôi không chuyển sang màu đen?

Firefox và Chrome dường như thực hiện việc này để ngăn văn bản màu trắng trên nền đen biến thành màu trắng trên nền trắng. Tôi không có màu nền (trừ màu trắng), do đó, chuyển đổi cấp trình duyệt này không hữu ích, nó chỉ giúp ngăn ngừa màu xám mà không có lý do gì.

Có cách nào để tắt tính năng này không? Hoặc tôi chỉ nên gắn với các kỹ thuật như độ mờ đục, phát hiện trình duyệt và tô màu xám của tôi ...

Answer 1

Giải pháp:

@media print { 
     h1 { 
     color: rgba(0, 0, 0, 0); 
     text-shadow: 0 0 0 #ccc; 
     } 

     @media print and (-webkit-min-device-pixel-ratio:0) { 
     h1 { 
      color: #ccc; 
      -webkit-print-color-adjust: exact; 
     } 
     } 
    } 

Answer 2

Một số trình duyệt thêm kính trọng hơn nếu bạn thêm màu: Thay thế #777 bằng #778. Hãy cảnh giác với độ mờ đục. Đôi khi, ngay cả khi bản xem trước bản in sẽ hiển thị kết quả tuyệt vời, nó chỉ thực sự hoạt động trên các máy in được chọn. Máy in có phần mềm không may mắn sẽ không in được văn bản của bạn nếu nó có màu xám khi sử dụng độ mờ.

Answer 3

tôi thấy phải:

1. Thêm !important cho quy tắc css ... và ...

2. Trong hộp thoại in Firefox, đánh dấu vào tùy chọn cho "Appearance : Màu nền in "

Tôi không thể làm cho nó hoạt động trong Chrome.

Answer 4

tôi thấy rằng màu TEXT không được thừa kế bởi "chung mục đích" stylesheet, nhưng phải được buộc lại trong tập tin in css.

Nói cách khác, ngay cả khi màu văn bản được đặt trong tệp css chung (có thuộc tính media='all'), nó bị bỏ qua khi được in, ít nhất là trong Firefox và Chrome.

Tôi thấy rằng viết lại văn bản (dư thừa nhưng ..... cần thiết) trong tệp css in (một với thuộc tính media='print'), màu bây giờ sẽ được xem xét.

Answer 5

Bạn chỉ cần xuất phông chữ xám của mình bằng svg. Trình duyệt không thay đổi màu sắc trong svg. Dưới đây là ví dụ:

<svg height="40" width="200"> 
    <text font-size="28px" y="25" x="30" fill="#ffffff" > 
    Some text 
    </text> 
</svg> 

Answer 6

Không có điều gì ở trên phù hợp với tôi vì vậy cuối cùng tôi đã tìm ra.

Luôn cung cấp màu cho các phần tử trực tiếp. Ví dụ Giả sử html của bạn là

<div class='div'><br/> 
     < h1>Text< /h1><br/> 
</div> 

và CSS của bạn

.div { 
    color: #ccc; 
    } 

Đây là trường hợp của tôi. Trong trường hợp này không có vấn đề gì bạn làm màu sắc sẽ không hiển thị.

Bạn phải làm

.div h1 { 
color: #ccc; 
} 

@media print { 
.div h1 { 
    -webkit-print-color-adjust: exact; 
    } 
} 

Hy vọng điều này sẽ giúp bạn !!

Vui lòng trả lời nếu bạn tìm thấy giải pháp tốt hơn vì đây là những gì tôi có thể tìm thấy sau 2 giờ và nó hoạt động cho tôi.