주워오고난 뒤 더 배운 지식
바로 전에 사이트에 웹폰트를 적용해서 서체를 전부 바꾸는 방법을 포스팅했었는데
여기서 글씨가 깨지는 분들을 위한 해결책입니다.
[CSS] 티스토리 블로그 폰트 변경하기, 사이트에 웹 폰트 적용
사실 이런 글은 이미 천지빼까리지만 써보기로 했습니다 블로그 새단장 했어요 보이시나요? 헤헷코슥~ 근데 진짜 CSS 알못이라 잡히는대로 대충대충해가지고 디자인이 예쁘지 않긴 하네요 앞으
drybone-developer.tistory.com
벌써 이 이미지에 나온 미리보기 제목 + 내용만 봐도 .... 글씨가 얼마나 잔혹하게 깨지는지 보이시죠
웹폰트는 15pt 이하의 크기가 되면 깨진대요. (눈물줄줄)
해결책
1. 15pt 이상의 크기로 키워준다!
2. 글씨를 아주 살짝 기울인다
이 글에서는 2번 해결책을 씁니다.
우선 CSS 편집부분으로 이동합니다.
티스토리의 경우 블로그 관리 → 스킨 편집 → html 편집 → CSS로 이동하면 됩니다.
이동 후, 맨 위 부분이나 서체 임베딩 코드 뒤에 이 코드를 삽입합니다.
1
2
3
4
/* 폰트 깨짐 방지 */
p, a, h1, h2, h3, h4, h5, h6, ul, li, tr, td, input, select, textarea, button, figure, blockquote{
transform: skew(-0.1deg);
}
cs
코드를 입력하고, 적용한 뒤 깨지던 글자들을 비교해보면 글자가 깨지지 않는걸 볼 수 있습니다.
transform: skew()는 텍스트 혹은 이미지 등을 기울이거나 하는 함수입니다.
여기서는 텍스트의 태그로 정해진 각각의 태그들에게 이걸 수행하도록 했습니다.
즉 글자를 기울이는 것으로 최종적으로 렌더링(이라고 해도 되나) 되어 보이는 글자가 깨지지 않게 한 것이죠.
여기선 -0.1deg를 했지만 0.1deg를 해도 상관 없고, 값이 더 작아도 효과가 있다면 그렇게 해도 됩니다.
저는 웨일브라우저를 쓰는데 0.001로는 효과가 없더라고요.
참고로 여기 쓴 p, a, h1, h2 등의 태그는 각각 의미하는 바가 있으며,
기울이지 않아도 깨지지 않거나, 기울이면 안 되는 부분의 태그는 빼주셔도 됩니다.
skew() - CSS: Cascading Style Sheets | MDN
The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a data type.
developer.mozilla.org
댓글