글꼴 얼굴 글꼴 품질 문제 (파이어 폭스, 크롬, 오페라)

는 사이트를 확인글꼴 얼굴 글꼴 품질 문제 (파이어 폭스, 크롬, 오페라)

@font-face { 
    font-family: 'SegoeUI'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg'); 
    font-style: normal; 
    font-weight: normal; 
    } 
@font-face { 
    font-family: 'SegoeUIBold'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg'); 
    font-style: normal; 
    font-weight: bold; 
    } 
@font-face { 
    font-family: 'SegoeUIItalic'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg'); 
    font-style: italic; 
    font-weight: normal; 
    }

을 그리고 문제와 함께있다 Firefox, Chrome 및 Opera 브라우저에서 출력. IE에서는 모든 것이 정상적으로 보입니다. 글꼴이 날카롭게 보입니다. 왜 그렇게됩니까? 어쩌면 내가 뭔가 잘못하고있는 걸까요?

출처

2012-04-10 Ahmed

스크린 샷 – Ahmed

이상한 추가 브라우저에 의해 적절한 취급을 보장하기 위해 http://www.w3.org/TR/WOFF/#appendix-b

application/font-woff

의로, WOFF 폰트에 대한 적절한 MIME 타입를 사용하여 돌볼 수 있습니다 ..처럼 보이지 않는 나를 위해. 다른 사람들의 피드백을 보는 것에 흥미 롭습니다. IE와 FF는 화면 1과 매우 유사하지만 FF에서는 약간의 희미 함이 있지만 두 번째 화면에서는 아무 것도 보이지 않습니다. –

이것은 매우 일반적인 문제이며 여러 번 여기에 응답되었습니다. 나중에 검색을 사용하십시오. – Brad

다른 브라우저는 글꼴을 다르게 렌더링합니다.

과거에 사용한 솔루션은 브라우저가 페이지를 렌더링하는 방식에 따라 글꼴이 제공되는 순서를 다시 정렬하는 것입니다. 대개 내 문제는 이전 버전의 IE에 있으므로 ttf 파일 앞에 .woff 파일을 제공하는 별도의 스타일 시트를 사용했습니다. 일부 브라우저는 특정 글꼴 유형 파일 만 읽을 수 있지만 둘 다 읽을 수 있기 때문에 작동하는 글꼴을 찾지 못합니다. 다시 정렬하면 좀 더 나은 렌더링을 사용할 수 있습니다.

별도의 CSS를 사용하게되면 $ _SERVER arrays http_user_agent 속성을 사용하여 브라우저를 기반으로 글꼴 CSS를 설정할 수 있습니다.

googles Droid 글꼴은 브라우저에 따라 때로는 재미있게 렌더링되는 글꼴이기도하므로 다른 방법을 찾는 데 도움이 될 수 있습니다.

출처

2012-04-10 19:53:58 Rooster

예를 들어보기 제대로 각 형식

주문에 몇 가지 트릭이있는 것 같다

이 먼저 SVG 역할을 수정 Fontspring 방탄 구문입니다

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
}

을

부터 http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

당신은 또한

출처

2012-12-12 11:34:38

글꼴 얼굴 글꼴 품질 문제 (파이어 폭스, 크롬, 오페라)

답변

관련 문제