css text-rendering
text-renderingCSS 속성은 텍스트를 렌더링 할 때 최적화 할 작업에 대한 렌더링 엔진에 대한 정보를 제공한다.
브라우저는 속도, 가독성 및 기하학적 정밀도 사이에서 절충안을 만듭니다.
text-rendering 속성은 CSS 표준에 정의되지 않은 SVG 속성입니다.
auto | optimizeSpeed | optimizeLegibility | geometricPrecision
사용예시
/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;auto
브라우저는 텍스트를 그리는 동안 속도, 판독성 및 기하학적 정밀도를 언제 최적화 할 것인지에 대해 숙련 된 추측을 한다.
optimizeSpeed
브라우저는 텍스트를 그릴 때 가독성 및 기하학적 정밀도보다 렌더링 속도를 강조한다.
optimizeLegibility
브라우저는 렌더링 속도와 기하학적 정밀도에 대한 가독성을 강조한다.
geometricPrecision
브라우저는 렌더링 속도와 가독성보다 기하학적 인 정밀도를 강조한다.
가장 눈에 띄는 효과는 optimizeLegibility 이다. 가독성이나 심미적 디자인을 저하시키는 상황을 줄이고자 사용하는 값이다.
* text-rendering: optimizeLegibility를 사용할 때의 주의점
일부 브라우저에서 inline-block 엘리먼트에 text-rendering이 적용된 경우(상속되는 경우도 마찬가지) 불필요한 줄바꿈이 일어나는 현상을 발견 >> 불필요한 줄바꿈 현상이 발생하는 대상에 대해 white-space: nowrap;으로 교정하는 것도 괜찮다.
한마디
css에서 별로 유명하지 않는 속성 같지만 유명한 UI 라이브러리는 어떤 css를 사용하나 검사창을 뜯어보다가 움직이는 SVG에서 처음보는 속성을 발견해서 한번 정리해보았다. 그 라이브러리에서도 text-rendering 중에 사용후 효과가 좋다는 optimizeLegibility 값을 적용했던데 나중에 나도 움직이는 SVG 를 사용할 일이 있을때 optimizeLegibility 속성을 적용해봐야겠다.
출처: https://code.i-harness.com/ko-kr/docs/css/text-rendering
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
