2012-09-01 3 views
5

Gecko 및 Webkit 브라우저는 text-rendering: optimizeLegibility을 통해 합자의 렌더링을 지원합니다 (글꼴은 예를 들어 Calibri와 같은 합자를 가져야합니다).font-size가 합자의 렌더링에 영향을 줍니까?

MDN page에 따르면 크기가 20px 이상인 텍스트 만 합자를 얻을 수 있다고합니다. my own research에 따르면이 사실이 아닙니다.

  • Firefox는 기본적으로 합자를 렌더링합니다.
  • text-rendering: optimizeLegibility을 지정하면 Chrome (& Safari)이 합자를 렌더링합니다.
  • 두 엔진 모두 글꼴 크기가 인 것 같습니다.

여기에 뭔가가 빠졌습니까? 아니면 MDN 페이지의 실수 (오래된 것입니까?)로 해결해야합니까?

[편집] 추가 읽기 : Smashing Magazine의 “A Closer Look At Font Rendering”.

답변

4

Firefox는 글꼴 렌더링 경로를 선택할지 여부를 결정하는 데 사용되는 값을 조정할 수있는 환경 설정 browser.display.auto_quality_min_font_size을 지원합니다. 그러나 Firefox의 현재 버전에서 계속 유지되는 코드의 유일한 부분은 작은 글꼴 크기 또는 명시적인 text-rendering: optimizeSpeed이 Uniscribe 대신 GDI를 사용하여 렌더링하는 Windows XP입니다.

썬더 버드는 어떤 이유로 든 해당 환경 설정의 값을 0으로 설정합니다.

2

실제로 MDN 페이지에 따르면 20px 이상의 텍스트는 ligatures를 어느 방법 으로든 가져오고 optimizeLegibility는이를 무시합니다.

보다 일반적으로 합자를 사용하는 것이 좋을 수도 있고 그렇지 않을 수도 있습니다 (특정 두 문자 간의 특정 커닝과 같은 가독성에 영향을 미치는 다른 요인)는 크기뿐 아니라 글꼴에서 글꼴까지 다양합니다. 이 버전이 버전과 함께 매우 빠르게 변하는 것을 발견하게 된 것은 놀라운 일이 아닙니다. 물론, 기반 기술은 여전히 ​​서 있지 않습니다.

2

귀하의 분석은 정확합니다. 추가 관찰 :

CSS3 Fonts에 설명 된 font-variant-ligatures 속성은 분명히 구현되지 않았습니다. 대신, 파이어 폭스는 접두사 -moz-로, 낮은 수준의 font-feature-settings 속성을 구현하는, 그래서 당신은 실제로 요소에

-moz-font-feature-settings: 'liga' 0 

을 설정하여 적용 합자에서 파이어 폭스를 방지 할 수 있습니다.

특정 상황에서 합자가 발생하지 않도록하려면 다른 방법으로 연결될 수있는 문자 사이에 ZERO-WIDTH NON-JOINER (ZWNJ)를 삽입 할 수 있습니다. fi 대신 f‌i입니다.