자동 중심 div 내의 아이콘 글꼴 렌더링이 브라우저 너비에 따라 흐리거나 선명한

Question

나는 아이콘 글꼴 열차를 타고 싶었지만 렌더러에 의해 빠르게 연기되었습니다. div 안에 퍼센트가 있거나 자동으로 가운데에 정렬 된 아이콘이있는 경우 아이콘을 반 픽셀로 정렬하여 흐리게 렌더링 할 수 있습니다.

나는 크롬과 관련된 버그를 지적한 Icomoon 지원부와 접촉했다. (https://bugs.chromium.org/p/chromium/issues/detail?id=426333) 불행히도 모든 주요 브라우저에서 문제를 재현 할 수있었습니다.

내가 얻은 추천은 자동 여백을 피하고 오늘날의 세계에서 실제로 가능한 것이 아닌 떠있는 것만 사용하는 것이었다. 그리고 제가 그렇게하더라도 나는 여전히 백분위 폭과 충돌 할 것입니다. 발생하는에서 블러를 preven't 수있는 방법이

질문

있습니까? 인라인 - svgs를 사용하는 것이 옵션 일 것이라고 생각하십니까? 하지만 그것은 Icon Font의 모든 목적을 능가합니다. 또는 전체 픽셀까지 모든 것을 반올림하는 스크립트가 있지만 극단적 인 것처럼 들릴 수도 있습니다.

단계를 수행해도 문제가 내가 Icomoon에 아이콘의 24 픽셀 세트를 만든

를 재현하는 demo.html와 함께 제공되는 세트를 다운로드. 그런 다음 데모의 주 래퍼로 이동하여 고정 폭과 여백 0 자동을 부여했습니다. 그런 다음 브라우저 너비의 크기를 조절하여 아이콘을 흐릿하게 만들거나 선명하게 만들 수있었습니다.

크롬

흐릿한 :

선명 :

파이어 폭스

흐릿한 :

선명 :

오페라

흐릿한 :

선명 :

에지

흐릿한 :

선명 :

인터넷 익스플로러

흐릿한 :

선명 : 내 경험에

Answer 1

은 흐린 글꼴은 종종 아이콘이 생성 된 방법의 결과이다. Font Awesome에는 바삭 바삭한 아이콘 글꼴을 디자인 할 때 다소 good tips이 있습니다.

Answer 2

누군가가 이것이 이상적인 브라우저 구현에서 실제로 발생한다는 증거를 제공 할 수 있지만이 대답은 질문에서 언급 한 짝수/홀수 픽셀 값을 기반으로하며 내가 생각하는 것입니다. 가능성이 가장 높은 원인.

글꼴 및 아이콘 글꼴이 기본적인 수준에 벡터

있다, 아이콘 폰트는 벡터이다. 이렇게하면 글꼴 크기에 관계없이 아이콘의 크기를 조정할 수 있으며 흐리게 표시되지 않습니다. 그러나 흐려짐은 벡터의 가장자리가 픽셀의 가장자리와 정렬되지 않을 때 발생할 수 있습니다.

가 Font Awesome Icon Design Tips Guide 강탈 렌더링 픽셀 대

벡터, 당신은 아래의 두 가지 데모를 볼 수 있습니다. 상단 이미지는 1px 개의 굵은 줄로 된 벡터로 1px 번 간격을두고 있지만, 오프셋은 0.5px 개입니다. 확대하지 않고 픽셀로 렌더링하면 픽셀이 선 색상의 50 % 및 배경 색상의 50 %를 차지해야하므로 흐리게됩니다.

픽셀 가장자리와 일치하지 않는

벡터 가장자리. (픽셀 가장자리에서 0.5px 오프셋을 나타내는 파란색).

한편, 아래 이미지는 벡터가 줄 지어있어 선/막대의 가장자리가 픽셀의 가장자리와 나란히 표시됩니다. 따라서 픽셀 수준에서 렌더링 할 때 배경 및 선 색상을 병합해야하는 픽셀이 없습니다.

올바르게 정렬 된 벡터

이 더 많은 예제를 더 자세히 이것을 설명하기 위해 보려면, 나 또한 너무 선명 대각선 모서리를 설명하는 전체 가이드를 읽고 권하고 싶습니다.

브라우저 렌더링 및 높은 DPI 화면

브라우저가 지금은 정말 쉽습니다 "중심"이 수 있도록 높은 DPI/망막 스크린, 처리해야 텍스트는 CSS px 폭 당이 개 실제 픽셀을 가지고 있기 때문에, 따라서 0.5px마다 파삭 파삭 한 선을 그릴 수 있습니다.

이미지로 판단 할 때 일반 DPI 화면을 사용하여 글꼴을 볼 수 있으므로 브라우저에서 아이콘을 0.5px 값으로 렌더링해야 할 때 벡터의 가장자리가 픽셀 중간에 놓이게됩니다 반쪽이 아니라 픽셀이 배경색의 50 %, 아이콘 색의 50 %를 차지하여 가장자리가 흐려지는 것을 의미합니다.

해결 방법으로는 슬프게도 테스트 할 수있는 낮은 해상도의 모니터가 없습니다. 당신의 목표는 아이콘의 가장자리가 약간 손보는 필요합니다 픽셀 경계의 가장자리에 렌더링하는 것입니다 만, 여기에 몇 가지 있습니다 당신은 시도 할 수 :

• 대신 기본 display: inline의 display: inline-block에 아이콘을 설정하는 텍스트 경향이있다. (일하지는 않겠지 만).
• 고정 된 너비의 아이콘을 중심에 놓을 수있는 아이콘 크기보다 큰 div으로 줄 바꿈하십시오.
• div 방법을 사용하는 경우 텍스트의 왼쪽 맞춤 또는 가운데 정렬과의 차이점을 시도하십시오.