Firefox 및 Opera의 웹 폰트 평활화 및 앤티 앨리어싱

내 사이트에서 사용하는 맞춤 웹 글꼴이 있습니다. 렌더링 출력의 스타일을 지정하기 위해 다음 코드를 사용했습니다.

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

이것은 Safari와 Chrome에서 잘 작동합니다 (가장자리가 더 선명하고 선이 더 얇음). Firefox와 Opera에서 동일한 스타일을 구현하는 방법이 있습니까?

Opera는 버전 15.0부터 Blink로 구동되므로 Opera -webkit-font-smoothing: antialiased에서도 작동합니다.

Firefox는 마침내 그레이 스케일 앤티 앨리어싱을 활성화하는 속성을 추가했습니다. 오랜 논의 끝에 다른 구문과 함께 버전 25에서 사용할 수 있으며,이 속성은 OS X에서만 작동합니다.

-moz-osx-font-smoothing: grayscale;

어두운 배경에서 흐릿한 아이콘 글꼴이나 밝은 텍스트를 수정해야합니다.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

두 속성을 모두 처리하기 위해 Sass 믹스 인을 포함하는 OSX의 글꼴 렌더링에 대한 내 게시물을 읽을 수 있습니다 .

글쎄, Firefox는 그런 것을 지원하지 않습니다.

Mozilla의 참조 페이지에서 font-smoothCSS 속성으로 글꼴이 렌더링 될 때 앤티 앨리어싱 적용을 제어하도록 지정 하지만이 속성은 이 사양에서 제거 되었으며 현재 표준 트랙에 없습니다.

이 속성은 Webkit 브라우저에서만 지원됩니다.

대안을 원하면 다음을 확인할 수 있습니다.

• 텍스트 그림자 앤티 앨리어싱 | Philip Renich, 웹 사이트-블로그
• cufón-사람들을위한 글꼴

사례 : 어두운 배경 Firefox (v35) / Windows에 재기 웹 글꼴이있는 밝은 텍스트
예 : Google 웹 글꼴 Ruda

놀라운 솔루션-
적용된 선택기에 다음 속성 추가 :

selector {
    text-shadow: 0 0 0;
}

실제로 결과는와 동일 text-shadow: 0 0;하지만 명시 적으로 blur-radius를 설정하는 것을 좋아합니다.

보편적 인 솔루션은 아니지만 경우에 따라 도움이 될 수 있습니다. 또한 지금까지이 솔루션의 부정적인 성능 영향을 경험 한 적이 없습니다 (완전히 테스트되지도 않음).

문제가 발생한 후 내 WOFF 파일이 제대로 수행되지 않았 음을 알게되었고 , 추가 CSS를 추가하지 않고 Firefox에서 원활하게 작동하는 적절한 WOFF를 제공하는 FontSquirrel에 새 TTF를 보냈 습니다.

이 링크로 해결책을 찾았습니다 : http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

단계별 방법 :

• WebFontGenerator에 글꼴을 보내고 zip을 가져옵니다.
• Zip 파일에서 TTF 글꼴 찾기
• 그런 다음 Linux에서 다음 명령을 수행하십시오 (또는으로 설치하십시오 apt-get install ttfautohint).
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• 그런 다음 하나 더 WebFontGenerator에서 새 TTF 파일 (neosansstd-black.changed.ttf)을 보냅니다.
• 모든 웹 폰트와 함께 완벽한 Zip을 얻을 수 있습니다!

이것이 도움이되기를 바랍니다.

... 본문 태그와 내용 및 서체에서 나온 이것들은 일반적으로 더 좋아 보입니다 ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

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


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

텍스트 색상이 어두우면 Safari 및 Chrome에서 text-stroke css 속성으로 더 나은 결과를 얻을 수 있습니다.

-webkit-text-stroke: 0.5px #000;

첨가

font-weight: normal;

@ font-face 글꼴은 Firefox에서 굵은 모양을 수정합니다.