Xoay CSS3 - hiển thị các vấn đề trong Firefox và Safari

Question

Tôi đang cố gắng xoay một dòng văn bản đơn giản theo một số độ với thuộc tính CSS3 »xoay«, chính xác 1,5 độ.

-webkit-transform: rotate(1.5deg); 
    -moz-transform: rotate(1.5deg); 
    -ms-transform: rotate(1.5deg); 
    -o-transform: rotate(1.5deg); 
    transform: rotate(1.5deg); 

Kết quả trong Chrome (phiên bản 18) là tìm cách OK, trong Firefox (v10) và Safari (5.1.5) Tuy nhiên tôi nhận được kết quả xấu xí.

Tôi đang sử dụng phông chữ được triển khai với @ phông mặt, nhưng với Arial tôi vẫn gặp sự cố (ít nhất là trong Firefox). Xem ví dụ bên dưới.

Điều thực sự lạ là việc chuyển sang phông chữ hệ thống (Arial) trong Safari sẽ giải quyết được sự cố, trong khi trong Firefox, sự cố vẫn tiếp diễn.

Mọi trợ giúp, cách giải quyết hoặc hack sẽ được đánh giá cao.

1) Chrome 18/font-family: Calibri/liên kết OK

2) Firefox 10/font-family: Calibri/liên kết xấu xí

3) Firefox 10/font-family: Arial/alignment vẫn xấu xí

4) Safari 5.1.5/font-family: Calibri/liên kết xấu xí

5) Safari 5.1.5/font-family: Arial/căn chỉnh OK

Cho đến nay, tôi đã tìm thấy các chủ đề sau đây, nhưng không ai trong số họ đưa ra một lời giải thích về cách giải quyết vấn đề:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

CSS Transform Rotate letter alignment

Tôi cũng đã cố gắng thiết lập các biến DirectWrite (để thay đổi hiển thị phông chữ), như được mô tả trong hướng dẫn này: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/, nhưng kết quả là như nhau.

Answer 1

Đây không phải là thứ bạn có thể khắc phục, từ báo cáo lỗi và các bit khác có vẻ như các nhà sản xuất trình duyệt đã biết về những vấn đề này .. nhưng tôi sẽ không cố gắng sửa chữa vĩnh viễn một thời gian.

Có thể thử đặt văn bản trong vùng chứa div của chính nó và xoay văn bản thay vì văn bản trực tiếp?

Nhưng IMHO nếu bạn cần điều này để làm việc trên một trang web sản xuất, hãy thay thế văn bản bằng hình ảnh. Người dùng đang sử dụng các trình duyệt không hỗ trợ công cụ CSS3 mới vì vậy nếu điều đó quan trọng hoặc không sử dụng, hoặc đảm bảo nó làm giảm độc đáo (chức năng trên tất cả nền tảng, nhưng có thể mất một số snazz) tức là tắt xoay văn bản trên trình duyệt trông xấu xí.