관리 메뉴

아둔한사의 개발공부와 테스트^^

구글 웹폰트 깨지는 현상 고치기 본문

FrontEnd/HTML5 / CSS

구글 웹폰트 깨지는 현상 고치기

아둔한사 2014.06.30 12:17

구글 웹폰트 깨지는 현상 고치기~ 



/* This is the default font face used for all browsers. */
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}


두번째 방법


I've written a big answer on that issue here: Is there any “font smoothing” in Google Chrome?. The post contains everything you need to know and how to fix this. And this is an official bug in Google Chrome, the developers of the browser already know about it and are working on a fix.

In short, you can add this to your text rule to make the fonts look much better:

text-stroke-fix:

-webkit-text-stroke: 1px

or

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

text-shadow-trick:

 text-shadow: #fff 0px 1px 1px;

or

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (in combination with the above):

-webkit-font-smoothing: antialiased;

Note: These are workarounds, not a real fix of the basic problem


---------------

주소 : 

http://stackoverflow.com/questions/17867574/chrome-not-antialiasing-text

0 Comments
댓글쓰기 폼