Firefox와 Chrome에서 글꼴이 다르게 표시됨

Firefox에서 내 메뉴 표시 줄이 Chrome과 다른 글꼴 스트레치로 표시되는 것 같습니다. 다음을 참조하십시오.

이 요소에 적용된 CSS는 다음과 같습니다.

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

내가 그 글꼴에 관한 모든 것을 정확히 알 수있는 한, 여전히 다르게 표시됩니다 (그림 참조). 왜?

Chrome은 WebKit 렌더링 엔진을 사용합니다. Firefox는 Gecko 엔진을 사용합니다. IE9 + 및 Opera에서 사용되는 DirectX 및 Vega 그래픽 엔진과 마찬가지로 해석 및 표시 유형은 약간 다릅니다.

브라우저가 텍스트를 동일하게 렌더링하도록 강요 할 수는 없지만 브라우저에서 탐색이 동일한 너비를 갖도록하기 위해 몇 가지 작업을 수행 할 수 있습니다.

1. 탐색 표시 줄 요소 대신 유형 또는 이미지를 사용하십시오. 탐색 영역이 자주 변경되지 않을 경우 유용 할 수 있습니다. 예 : www.apple.com

2. CSS를 사용하여 각 탐색 요소의 너비를 수정하십시오. 텍스트 크기는 브라우저마다 다르게 보이지만 <li>탐색 영역의 각 요소에 고정 픽셀 너비를 지정하면 각 링크의 경계 상자는 브라우저에서 매우 유사하며 탐색 영역의 총 너비는 동일해야합니다.

다른 브라우저 (및 다른 운영 체제) 간의 글꼴 렌더링의 차이점은 사실입니다. 글꼴이 다른 너비로 표시되면 디자인을 계속 처리 할 수 ​​있는지 확인해야합니다.

누군가이 문제를 겪고 있다면 문제는이었습니다 letter-spacing. Chrome과 Firefox는 속성을 다르게 처리합니다.

내 문제는 letter-spacing다른 요소의 위치에 영향을 미친다 는 것이었다. 특히 탐색 메뉴의 일부 이미지 속성을 제거하면 내 문제가 즉시 해결되었습니다.

또한 .point값 을 구체적으로 사용 하면 두 브라우저간에 변경 효과가있을 수 있으며 내 경우에는 사실 이라고 읽었습니다 .

여기에 언급 된 것과 같은 문제

당신은 당신의 CSS를 재설정 할 수 있습니다

http://developer.yahoo.com/yui/reset/ 희망을 가지면 실마리를 얻을 수 있습니다.

웹킷은 글꼴 크기로 px를 지원하지만 문자 간격과 같은 경우 em을 사용하지 않으면 모두 무시합니다.

두 개의 OS에서 6 개의 브라우저 / 4 렌더링 엔진을 테스트 한 후 줄 간격을 사용하더라도 가장 동일하다는 것을 알았습니다. 잠시 후에 Windows와 Linux의 차이점을 살펴 보겠습니다.

Palatino 글꼴은 어디에서나 사용할 수 있다고 생각했지만 크롬은 로마보다 약간 작아졌으며 기본 글꼴은 같은 결과 (크롬이 다름)로 인해 나를 잘못 인도했습니다.

어쨌든 시간을 로마자로 지정하거나 @fontface를 사용하여 글꼴 파일을 제공하면! 네비게이션 바를 더 매끄럽게 만들 수 있습니다 ;-)

비슷한 문제가 있었고 해결책을 찾았습니다.

사용 :

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

Firefox에서는 멋지게 보입니다. Chrome에서는 글자 간격이 이상했습니다. optimizelegibility스타일을 제거하는 것이 트릭이었습니다. 두 브라우저 모두 이제 동일하게 렌더링됩니다.

웹킷의 스타일을 제거하고 다른 브라우저를 위해 그대로두기로 결정했습니다. 지금은 좋아 보인다.

Open-Sans와 비슷한 문제가 있었는데, 이것은 나를 위해했습니다.

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