font-smothing에서 OSX 글꼴 렌더링 방법 조정

주의는 Non-standard입니다.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
MDN에도 이런 기록이 있어 정식 규격으로 만들어진 트럭과 일탈했다.
영향 범위와 모든 브라우저의 외관 변화 가능성을 충분히 이해한 후에 사용해야 한다.
예를 들어'이 속성을 설정하면 문자가 예뻐 보여요!'그렇지 않다면 현실에서'앤티앨리어싱 문제로 텍스트를 읽기 어려운 환경이 있다','다수의 해상도(1x/2x)에 대응해야 하는 터미널과 모니터'등이 발생할 경우 앤티앨리어싱 지정 목적을 명확히 고려해야 하지 않을까.

아래의 보도는 반톱니 처리를 더욱 상세하게 설명하였다.

웹 브라우저에서 텍스트의 반별명 현황에 가장 적합한 | dwango creators'blog (다국적 창의 블로그)

위의 글은 매우 상세한 해설을 했고 2017년의 현황에 따른 정보이기 때문에 반드시 참고할 것을 추천합니다
Google+ 오랜만에 보니 글씨체가 유창하고 예뻐 보인다.

css를 시도하면 다음 속성이 지정됩니다.

-webkit-font-smoothing: antialiased;

-webkit-font-smoothing

이 속성은 아래 세 개의 값을 준비했다.

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; // Safari での Default値

뭐냐면요.
Safari(Webkit)의 글꼴 렌더링을 조정합니다. 특히 앤티앨리어싱 더하기를 변경할 수 있습니다.
추기에 쓰여 있지만 Firefox를 향한 속성도 있습니다.
아래의 보도는 이해하기 쉽다.

-webkit-font-smothing 및 Usability-기념 로그

-webkit-font-smoothing - MAXVOLTAR

확실히 크롬과 사파리는 글씨체가 좀 굵어서 신경이 쓰인다.font-weight의 지정은 서로 다른 행위이기 때문에 의도대로 표시되지 않을 수 있습니다.
또 애니메이션 등에서는 반짝임 등의 원인이 될 수도 있다.

Safari, Chrome에서 굵어진 텍스트 제거

이런 상황에서 이 속성을 바꾸면 문제를 해결할 수 있다.

주의사항 등

그나저나 첫글 지적도 있고요.
설정antialiased시 유창해 보이지만 문자의 인상이 약해져 배경색과의 대비도 등으로 잘 보이지 않을 때도 있다.

Please Stop "Fixing" Font Smoothing

또 다른 주의할 점이 있으면 알려주세요.

개인 소감

저는 개인적으로 고체적이고 깨끗한 인상을 주는데 font-weight: bold;와의 차이가 뚜렷하고 이완도가 있기 때문에 구조상의 블록을 식별하기 쉽다고 생각합니다.
Google + 이외에도 가져온 사이트를 볼 수 있기 때문에 토론의 여지가 있습니다.
그러나 Google + 도 서비스 내에서 적용되지만 Google 서비스 전체에서 적용되는 것은 아닙니다.
예를 들어 아래의 페이지 등.
Google + 로 더 많이 연결합니다. -Google+
사용자마다 쉽게 볼 수 있는 무게가 차이가 있는 것 같고 상술한 대비도 문제도 있다.
예뻐 보이면 일단 써!함부로 들여오지 말고 사용할 곳을 잘 생각해라.

예제

이해하기 어렵지만 Qita:Team의 텍스트가 표시됩니다.

subpixel-antialiased (Default)

antialiased

아이디, 날짜 등은 알기 쉽습니까?

ON/OFF는 이해하기 쉽습니다.

이해하기 어렵지만 글꼴이 굵어 보이는 것이 Default 상태입니다.

헤더 부근에'기사'라고 쓰여 있는 링크를 주의해 주시기 바랍니다. 하지만 똑똑히 보이는 사람은Default 상태입니다.
글씨체가 가늘어 보이는 결과 식별하기 어려운 부분이 자주 나타나 주의가 필요하다.

추기

Firefox도 있습니다.

Better font-rendering on OSX | Maximilian Hoffmann

857142 – Add CSS property for author control over antialiasing on Mac OS X, for cases where fonts appear too heavy

-moz-osx-font-smoothing: auto | grayscale // Firefox

grayscale - 웹키트 버전antialiased과 대응하는 것 같아요.
font-smooth - CSS | MDN