CSS - Firefox 및 Chrome에서 글꼴이 다르게 렌더링됩니다.

Question

Google 글꼴 및 CSS의 @import 메서드를 사용하여 웹 사이트에 글꼴을 포함하고 있습니다.

크롬은 글꼴을 아름답게 표시합니다. 그들은 무게가 있고 선명합니다. Firefox는이 렌더링을 복제하지 않습니다. 아래를 참조하십시오 : 당신이 파이어 폭스를 볼 수 있습니다 왼쪽에

합니다. 제목의 글꼴 두께가 일정하지 않습니다. 더 작은 설명 텍스트는 Chrome 대응 텍스트보다 약간의 가중치를 가졌음을 알 수 있습니다.

크롬이 오른쪽에 있습니다. 알 수 있듯이 글꼴의 무게는 중요합니다.

@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro'); 

* { 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

가 어떻게이 문제를 해결할 수 있습니다 파이어 폭스 적절한 무게와 내 글꼴을 표시했다 :

나는이 문제를 해결하기 위해 시도에 다음 CSS를 사용하고?

파이어 폭스 버전 : 57.0.1 (64 bit) [Most recent]

크롬 버전 : 62.0.3202.94 (64 bit) [Most recent]

많은 감사합니다.

Answer 1

황량한 길을 걷고 있습니다. 지금 당장 가장 좋은 방법은 브라우저의 운영체제가 텍스트 렌더링 구현을 수정하도록하는 것입니다.

저는 이러한 모든 설정으로 놀았으며 특히 Windows, OS X 및 Linux에서 테스트를 시작할 때 괜찮은/일관성있는 렌더링을 생성하지 않습니다.

text-rendering 및 font-smoothing을 재정의하면 결국 전체 응용 프로그램이 느려집니다 (특히 DOM 트리가 큰 경우).

최종 사용자가 텍스트 렌더링을 신경 쓰지 않는다고해도 (Windows XP에서는 ClearType을 설정하지 않았을 수도 있습니다.) 아무리 나쁜 것처럼 보일 것입니다.

---

요점 : 모든 요소에서 텍스트 렌더링을 강제 실행하지 마십시오. 글꼴 렌더링이 실제로 사라지는 표제에서 렌더링시 글꼴 모양의 원래 모양 정밀도를 유지하려고하므로 geometricPrecision을 사용해보십시오.

Answer 2

필자는 몇 가지 테스트를 해본 결과 Firefox에서 일관성없는 글꼴 가중치가 표시되지 않도록하는 방법을 찾았습니다.

일부 jQuery를 사용하여 브라우저를 검색 할 수 있으며 브라우저 별 스타일을 추가 할 수 있습니다. 이 경우, 나는 그것이 청소기 모양 생성하는 가벼운 글꼴 무게를 가질 수 있도록 제목 블록에 글꼴 무게를 추가했습니다 : font-weight: 400로 파이어 폭스를

왼쪽의 인을하고, 오른쪽에는 font-weight: 600의 Chrome이 있습니다. 내 브라우저 감지 jQuery는 아래를 참조하십시오.다음과 같이

if (navigator.userAgent.search("Firefox") >= 0) { 
    $('body').addClass('firefox'); 
} 

내 CSS는 다음과 같습니다

이

body.firefox h1 { 
    font-weight: 400; 
} 

그것은 반드시 수정이 아니다, 그러나 그것은 글꼴 가중치의 고르지 다움을 제거합니다.

이 작업을 수행하는 더 좋은 방법이나 질문에 대한보다 실질적인 해결책에 대해 언제든지 말씀해주십시오.

감사합니다. 다른 사람으로

Answer 3

브라우저 (또는 운영 체제)에서 텍스트 렌더링

텍스트 렌더링이 추론하고 특별한 경우, 브라우저의 많은 및 운영 시스템이다와 굉장히 복잡한 과정이를 "고정"하려고 귀찮게하지 않습니다 썼다 더 나은 절충안을 얻기 위해 렌더링을 조정할 때마다 항상 서로 또는 버전간에 일관성을 유지할 수 없으며 사용하는 글꼴 (및 글꼴 버전)에 따라 렌더링의 달콤한 지점이나 공포의 경우가 발생할 수 있습니다 .

플러스 귀하의 결과 평가는 이전의 렌더링에 의해 크게 치우쳐지고 사용자는 종종 다른 습관과 선호도를 갖게됩니다.

해결할 수있는 유일한 렌더링은 사용자의 취향에 맞게 시스템에서 해결할 수있는 유일한 렌더링 방법이며, 텍스트 렌더링의 근사값, 나쁜 반올림 및 휴리스틱 블랙 매직이 대부분 HiDPI 화면을 구매하는 것입니다. 충분하지 않은 픽셀에 복잡하고 작은 글리프 모양을 맞추려고하기 때문입니다.