플랫폼에 따라 텍스트 크기가 다릅니다.

StackOverflow https://stackoverflow.com/questions/5410481

문제

플랫폼마다 텍스트를 다른 크기로 렌더링하는 경우 다른 플랫폼에서 정확한 크기를 조정하려면 어떻게해야합니까? 이 문제는 Firefox 4 의 최근 릴리스로 더욱 악화되었습니다. 이 버전은 DirectWrite 를 사용하여 텍스트의 하드웨어 렌더링을 가능하게합니다. DirectWrite로 작성된 텍스트의 크기는 하드웨어 가속없이 작성된 텍스트보다 훨씬 큽니다. 다음 예를 참고하십시오. 다음은 실제 예 입니다. CSS.

directwrite off

  • Windows 7 64 비트 홈
  • ATI Radeon HD 4670
  • 드라이버가 업데이트되지 않았기 때문에 DirectWrite가 꺼져 있습니다 . ㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ
  • 620 x 283

    directwrite on

    • Windows Vista 64 비트 Business
    • nVidia GeForce 8800GT
    • 드라이버를 방금 업데이트했기 때문에 DirectWrite가 켜져 있습니다 . ㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ
    • 620 x 293

      HTML 라코 디스

      CSS 라코 디스

      DirectWrite가 꺼져있을 때 내비게이션이 콘텐츠와 정렬되는 방식을 보셨나요?하지만 DirectWrite가 켜져있을 때 내비게이션이 콘텐츠보다 더 큽니까? 해키 솔루션이 있다는 것을 알고 있습니다. 하나는 모든 것 (font-size, width, height)을 px로 지정하는 것입니다. 이는 구성 요소가 모듈식이 아니기 때문에 이상적이지 않습니다. 즉, 다른 크기로 확장 된 다른 설정에서 재사용 할 수 없습니다. 또한 IE6의 글꼴 크기 옵션을 중단합니다. 또 다른 해결책은 JavaScript를 사용하여 탐색의 물리적 높이를 읽고 콘텐츠를 동일한 높이로 만드는 것입니다. 스타일에 대한 CSS의 역할이기 때문에 이상적이지 않습니다. 이에 대한 CSS 솔루션이 있습니까?

      이것은 많은 예 중 하나 일뿐입니다. 다른 하나는 Ubuntu 9의 Firefox 3에 훨씬 더 넓은 텍스트가 있으므로 모든 링크가 기본 탐색에 맞지는 않습니다. 나는 max-width: 37em; overflow: hidden로 마지막 탐색 링크를 잘라 내야했습니다.

도움이 되었습니까?

해결책

내 정직한 대답은 다양한 글꼴 크기를 처리해야한다는 것입니다. ㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ ㅇㅇㅇ가장 좋은 방법은 "해키"이므로 min-height: 26.1em를 사용하여 콘텐츠 높이를 정렬하지 않는 것입니다.UL이 DIV 내부에 있고 결론이 항상 일치하도록 HTML을 재구성하는 것이 좋습니다.

그중에 LI를 항상 같은 높이로 만드는 ul li { line-height: 1em } 등을 설정할 수 있습니다.

다른 팁

걱정하지 않습니다.그들은 본질적으로 다른 엔티티이며 "고급 옵션"을 누르면 확장 될 것이라고 말했듯이 내용은 어쨌든 고정되지 않습니다.고정 된 경계가 아니라는 것을 알려주는 듯 맛을 보니 괜찮아 보인다.
여기에 아이디어가 있습니다.고정 된 상태로 유지하려면 컨테이너 DIV 내부에 모든 것을 래핑하고이를 사용하여 테두리를 정의 할 수 있습니다.그런 다음 콘텐츠가 컨테이너 DIV 외부로 확장 될 때 오버플로 스크롤을 사용합니다.수직적이라면 너무 귀찮아서는 안됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top