2014-06-10 4 views
1

다른 브라우저에서 다른 글꼴 렌더링에 대한 많은 질문이 있다는 것을 알고 있습니다. 그러나 이것이 렌더링 때문이라고 생각하지 않습니다. 내가 크롬이를 열 때다른 브라우저에서 글꼴이 다르게 보입니까?

웹 사이트는, wikipedia입니다 그것은 다음과 같습니다 screenshot in non Chrome

: 나는 다른 브라우저 (오페라 파이어 폭스 또는 IE)에서이를 열면 screenshot in Chrome

은,이 폰트를 표시

왜 그 차이가 있습니까? 글꼴에 대해 많이 알지는 않지만 정의한 CSS 코드를 확인했습니다. font-family: sans-serif; 그래서 내 크롬은 기본 설정과 비슷한 것을 가지고있어 어디에서 변경하지 않는 것 같습니까?

추신 : 크롬을 사용하여 다른 웹 사이트를 탐색 할 때이 차이점을 발견하지 못했습니다. 그렇다면 CSS를 작성할 때 이러한 차이를 피하는 방법은 무엇입니까?

답변

2

때문에를 찾기 위해 '고급 설정 표시'또는 같은 당신이 설정으로 이동하고 클릭해야 당신은 크롬에서 를 표시 할 글꼴을 선택하는 것을 할 수 있습니다 font-family: sans-serif;이 설정되면 브라우저 세트마다 고유 한 표준 글꼴이 설정됩니다. 이것은 당연히 브라우저마다 다를 수 있습니다.

크롬에서는 고급 설정에서 chrome : // settings /에 기본 글꼴을 설정할 수 있습니다.

사파리에서는 덜 쉽지만 this post을 찾을 수 있습니다.


편집 결과에 따라 올바른 글꼴이 표시되도록 CSS에서 글꼴 스택을 정의해야합니다.

글꼴 스택은 선택한 글꼴을 정의하는 데 사용되는 글꼴 스택입니다. 다음과 같이 표시됩니다. font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

여기서는 Arial을 표준 글꼴로 정의합니다. Arial이 발견되지 않으면 Helvetica Neue가 선택됩니다. 해당 글꼴도 없으면 Helvetica가 설정됩니다. Helvetica조차도 존재하지 않는 아주 드문 경우에는 브라우저에 의해 설정된 표준 산세 리프 글꼴이 선택됩니다.

참고로 this website을 확인할 수 있습니다. CSS에서 사용할 수있는 표준 글꼴 스택이 많이 있습니다.

1

모든 브라우저 콘텐츠의 표시 조정 메뉴

1

글꼴 호환성은 다양한 브라우저와 달라야합니다. 이 문제를 해결하는 방법은 Google 글꼴을 사용하거나 다양한 브라우저에서 지원되는 글꼴 확장명을 호출하는 것입니다. 자세한 내용은

@font-face { 
font-family: 'MyWebFont'; 
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 
    url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ 
} 

See this link.

관련 문제