Firefox 및 Opera의 웹 폰트 스무딩 및 앤티 앨리어싱

Firefox 및 Opera의 웹 폰트 스무딩 및 앤티 앨리어싱

---

내 사이트에 일부 사용자 정의 웹 글꼴이 포함되어 있으며 다음과 같은 것들을 사용합니다.

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

렌더링 출력의 스타일을 지정합니다. 이것은 Safari와 Chrome에서 잘 작동합니다. 가장자리가 날카 로워지고 선이 얇아집니다.

Firefox에서 이와 같은 작업을 수행하는 방법이 있습니까? 아니면 오페라?

---

Opera는 버전 15.0부터 -webkit-font-smoothing: antialiasedOpera에서 작동하기 때문에 Blink로 구동됩니다 .

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-smooth글꼴을 렌더링 할 때 CSS 속성이 앤티 앨리어싱 적용을 제어하는 ​​CSS 속성으로 지정 하지만이 속성은 이 사양에서 제거 되었으며 현재 표준 트랙에 없습니다.

이 특성은 웹킷 브라우저에서만 지원됩니다.

대안을 원한다면 이것을 확인할 수 있습니다.

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

---

사례 : 어두운 배경의 Firefox (v35) / Windows에서 거친 웹 글꼴이있는 밝은 텍스트
예 : Google Web Font Ruda

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

selector {
    text-shadow: 0 0 0;
}

실제로 결과는와 동일 text-shadow: 0 0;하지만 흐림 반경을 명시 적으로 설정하고 싶습니다.

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

---

문제가 발생한 후 WOFF 파일이 제대로 완료되지 않은 것을 확인한 후 FontSquirrel에 새 TTF를 보내서 CSS를 추가하지 않고도 Firefox에서 원활하게 작동하는 적절한 WOFF를 제공했습니다.

---

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

단계별 방법 :

• 글꼴을 WebFontGenerator로 보내고 Zip을 얻으십시오.
• Zip 파일에서 TTF 글꼴을 찾으십시오.
• 그런 다음 Linux에서이 명령을 수행하십시오 (또는 by by 설치 apt-get install ttfautohint).
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• 그런 다음 WebFontGenerator에서 새 TTF 파일 (neosansstd-black.changed.ttf)을 하나 더 보냅니다.
• 당신은 모든 웹 글꼴과 완벽한 우편 번호를 얻을!

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

---

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

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에서 굵게 표시됩니다.

참고 URL : https://stackoverflow.com/questions/11459746/webfont-smoothing-and-antialiasing-in-firefox-and-opera