2015-01-29 3 views
5

웹 사이트에서 Open Sans 글꼴을 사용하고 있지만 Adobe Illustrator (첨부 된 이미지 참조)보다 모든 브라우저에서 훨씬 두껍게 보입니다. 왜 이것이 "thinner"를 표시하기 위해 브라우저에서 글꼴을 가져올 수있는 방법이 있습니까?브라우저에서 글꼴이 두껍게 렌더링됩니다.

Illustrator

Browser

브라우저와 일러스트 레이터 모두 당신이 빛 (300)와 정상을 포함하고 있는지 확인 볼드체 무게 (600)

+0

WRT 편집 : 귀하의 질문에 무게 600보다 얇은 글꼴을 사용하게 할 수 있습니까? –

+1

사용중인 HTML 및 CSS 코드를 게시하십시오. 서로 다른 프로그램에서 다르게 렌더링 된 글꼴을 사용하는 것이 일반적이지만이 차이점만으로는 설명하기가 너무 어려워 보입니다. –

답변

13

문제는 앨리어싱 때문이었습니다. 다음의 CSS 솔루션은 사파리, 크롬 및 파이어 폭스에서 작동합니다 :

-moz-osx-font-smoothing: grayscale; 
-webkit-font-smoothing: antialiased; 
+0

정말 고마워요! –

2

을 렌더링하는 (400) 가중치를 사용하면 간단하게 다음을 수행 할 수 있습니다.

body { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; /* Or 400, if 300 is too light. */ 
} 
+0

고마워, 질문에 대한 업데이 트를 참조하십시오 – RunLoop

+0

@ RunLoop 같은 글꼴 크기를 사용하고 있습니까? 'pt' 단위를 사용하고 있습니까? –

+0

두 경우 모두 px를 사용하고 있습니다. – RunLoop

0

Open Sans Webfont는 10 가지 스타일로 제공됩니다. 나를 위해 그것은 브라우저가 semibold 하나를 표시하는 것 같습니다. 규칙적이어야하며 잘 진행해야합니다.

는 fontsquirrel

http://www.fontsquirrel.com/fonts/open-sans

+0

나는 당신이 "10 개의 무게"를 의미한다고 생각합니다. 단 3 가지 글꼴 스타일이 있습니다! –

+0

맞습니다 - 모든 가중치에 단일 스타일 시트가 있기 때문에 스타일을 의미했습니다 :) – moesphemie

0

간단한 대답은 수정이되지 않는 것입니다에서 살펴 보자. 원하는 스타일과 무게를 올바르게로드하고 호출하는 경우 어도비와 웹 브라우저 (또는 브라우저에서 브라우저로)가 다르게 렌더링되는 경우가 있습니다. 당신의 선택은 400 무게로 이동하거나 담대함을 사랑하는 법을 배워야합니다.

관련 문제