2012-01-07 3 views
0

Photoshop 이미지를 HTML로 변환하는 중 글꼴 크기를 11px로 설정하면 흐릿 해지지 만 Photoshop에서는 여전히 멋지게 보입니다.11px보다 작 으면 글꼴이 흐릿 해지기 시작합니다.

주위를 놀고 난 후에 대신 smooth으로 글꼴 유형 옵션을 설정하면 Photoshop도 글꼴을 흐리게 만듭니다.

그렇다면 어떻게하면 Photoshop의 글꼴 렌더링을 반영하도록 CSS를 사용하여 글꼴을 더 선명하게 만들 수 있습니까? Arial을 제 글꼴로 사용하고 있습니다. 여기 내 CSS 지금의 :

.user_status { 
    color: #666666; 
    font: Arial; 
    font-size: 11px; 
    display: block; 
    margin-top: 10px; 
} 

는 멋진 답을 여러분 모두 감사합니다, 그것은 나에게 많은 도움이, 나는 거기에, 불행하게도 정확한 하나 더 후 1 대답 ...

답변

4

대부분의 브라우저는 시스템의 글꼴 렌더링 라이브러리를 사용하므로 대부분의 글꼴이 다른 운영 체제에서 약간 다르게 렌더링됩니다. 그러나 아래 나열된 2 css3 속성을 사용해 볼 수 있습니다.

-webkit-font-smoothing : [auto | 초기 | 없음 | 안티 앨리어싱 | subpixel-antialiased]

이 속성은 Safari 및 Chrome과 같은 웹킷 브라우저에서만 작동합니다. 이에 대한 자세한 내용은 http://maxvoltar.com/archive/-webkit-font-smoothing을 참조하십시오.

font-smooth : [auto | 절대로 | 항상 | < 절대치 > | < 길이 >]

이것은 W3C CSS 글꼴 모듈 사양의 일부입니다. 모든 것을 http://www.w3.org/TR/WD-font/#font-smooth-prop에서 볼 수 있습니다. 어떤 브라우저가이 속성을 지원하는지 아직 확실하지 않습니다. YMMV.

3

을 선택 수 있으면 좋겠다 네가 할 수있는 일이별로 없다. 브라우저에는 Photoshop에서 제공하는 고급 앤티 앨리어싱 설정이 없으므로 글꼴 매끄럽게 모드를 선명하고 부드러 우며 선명하게 설정할 수 있습니다. 글꼴을 더 크게 또는 작게 만들어야하며 대부분 브라우저에서 텍스트가 렌더링되는 방식에 따라 다릅니다.

+0

오 내가 생각하는 것은 어쩌면 몇 가지 해킹 – Linas

+0

및 브라우저가 폰트의 폭이 다른 너무 렌더링있다! 현재 동일한 너비가 매우 중요하고 붙어있는 프로젝트에서 작업 중입니다! – webestdesigns

1

불행히도 일반적으로 브라우저에서 글꼴을 렌더링하는 방법을 제어 할 수는 없습니다. 새로운 CSS3 속성 인 font-smooth은 사용자가 원하는대로 제어 할 수는 없습니다.

일부 대안은 원하는 효과를 얻기 위해 수동 또는 서버 측 렌더링 된 JavaScript 및 이미지를 사용하는 것일 수 있습니다. sIFR (Scripted 인라인 플래시 대체)을 사용하여 글꼴을 앤티 앨리어싱 할 수있는 작은 플래시 무비 클립으로 대체 할 수도 있지만 플래시는 거의 유비쿼터스가 아니며 매우 효율적이지도 않습니다. 우아한 솔루션.

이 기능이 절대적으로 필요한 경우 Photoshop에서 투명 PNG를 만들고 background-imagetext-indent: -9999px을 사용하여 텍스트를 이미지로 바꿀 것을 제안합니다.

또 다른 요점은 실제로 11px의 글꼴 크기를 사용해야한다는 것입니다. 보기가 어렵 기 때문에 단순히 더 큰 글꼴 크기를 선택하는 것이 좋습니다.

나는이 머리 글자 어에 틀린 것일 수 있습니다.

1

웹킷에서 당신은 설정할 수 있습니다 : 없음 : 이것은 포토샵의 안티 앨리어싱을 대략 것

-webkit-font-smoothing: none; 

.

여기 데모를 참조하십시오 http://jsfiddle.net/jv5W8/

관련 문제