Phông chữ hiển thị khác nhau trong Firefox so với Chrome

Có vẻ như thanh menu của tôi được hiển thị với một phông chữ khác trong Firefox so với Chrome. Xem như sau:

Đây là CSS được áp dụng cho thành phần này:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

Theo như tôi có thể nói mọi thứ liên quan đến phông chữ đó hoàn toàn giống nhau, nhưng chúng vẫn hiển thị khác nhau (xem pic). Tại sao?

Chrome sử dụng công cụ kết xuất WebKit. Firefox sử dụng công cụ Gecko. Cả hai cách hiểu và kiểu hiển thị hơi khác nhau, cũng như các công cụ đồ họa DirectX và Vega được sử dụng trong IE9 + và Opera.

Bạn không thể buộc các trình duyệt hiển thị văn bản giống hệt nhau, nhưng bạn có thể thực hiện một số điều để đảm bảo rằng điều hướng của bạn chiếm cùng chiều rộng trên các trình duyệt:

1. Sử dụng hình ảnh hoặc SVG thay vì loại cho các thành phần thanh điều hướng của bạn. Điều này có thể hữu ích nếu khu vực điều hướng của bạn không có khả năng thay đổi thường xuyên. ví dụ: www.apple.com

2. Sửa chiều rộng của mỗi thành phần điều hướng bằng CSS. Kích thước văn bản sẽ vẫn khác nhau giữa các trình duyệt, nhưng nếu bạn cung cấp cho mỗi <li>phần tử trong vùng điều hướng của bạn một chiều rộng pixel cố định, hộp giới hạn của mỗi liên kết sẽ rất giống nhau trên các trình duyệt và tổng chiều rộng của vùng điều hướng sẽ giống nhau.

Sự khác biệt trong kết xuất phông chữ giữa các trình duyệt khác nhau (và trên các hệ điều hành khác nhau) là một thực tế của cuộc sống. Bạn chỉ cần đảm bảo rằng nếu phông chữ hiển thị ở các độ rộng khác nhau, thiết kế của bạn vẫn có thể đối phó.

Trong trường hợp bất cứ ai đi qua điều này, đối với tôi vấn đề là letter-spacing. Chrome và Firefox xử lý tài sản khác nhau.

Vấn đề của tôi letter-spacinglà ảnh hưởng đến vị trí của các yếu tố khác; cụ thể một số hình ảnh trong menu nav. Bằng cách loại bỏ tài sản, vấn đề của tôi đã được giải quyết ngay lập tức.

Tôi cũng đã đọc được rằng việc sử dụng .pointcác giá trị cụ thể có thể có các hiệu ứng thay đổi giữa 2 trình duyệt, điều này đúng trong trường hợp của tôi.

loại vấn đề tương tự được nêu ở đây

bạn có thể thiết lập lại css của bạn bằng cách

http://developer.yahoo.com/yui/reset/ hy vọng ít nhất bạn sẽ có được manh mối bằng cách

Tôi đã thấy rằng webkit sẽ hỗ trợ px cho kích thước phông chữ, nhưng đối với những thứ như khoảng cách chữ cái họ sẽ bỏ qua tất cả cùng nhau nếu bạn không sử dụng chúng.

Sau khi kiểm tra 6 trình duyệt / 4 công cụ kết xuất trên hai HĐH. Tôi đã tìm thấy hầu hết đều giống nhau ngay cả với khoảng cách dòng. Tôi sẽ xem xét sự khác biệt với windows và Linux trong một phút.

Tôi nghĩ rằng phông chữ Palatino có sẵn ở khắp mọi nơi nhưng chrome lại rơi vào thời gian roman nhỏ hơn một chút, các phông chữ mặc định có cùng kết quả (chrome khác nhau) khiến tôi hiểu lầm một chút.

Dù sao, nếu bạn chỉ định thời gian roman hoặc sử dụng @fontface để cung cấp tệp phông chữ! bạn có thể làm cho thanh điều hướng của bạn nhấp nháy ;-)

Tôi đã có một vấn đề tương tự và tìm thấy một giải pháp:

Sử dụng:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

Trong Firefox, nó trông rất tuyệt. Trong Chrome, khoảng cách chữ là lạ. Loại bỏ các optimizelegibilityphong cách đã lừa. Cả hai trình duyệt hiển thị giống hệt bây giờ.

Tôi quyết định loại bỏ kiểu cho webkit và để nó ở vị trí cho các trình duyệt khác. Có vẻ tốt bây giờ.

Tôi gặp vấn đề tương tự với Open-Sans, điều này đã giúp tôi:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;