인터넷 브라우저 사용 시 폰트가 깨지거나 번져 보이는 현상이 발생한다.
크롬만 그런 것은 아니고 엣지 등 다른 브라우저도 동일하다.
다만 크롬 사용률이 엄청나게 올라서 아마 크롬 오류라고 생각하는 사람들이 있을 것 같다.
bold 문제
검색을 해보거나 문제 되는 부분의 css를 살펴봤다면 bold 볼드체에서 발생하는 문제라는 것을 알았을 것이다.
브라우저는 원래 사용할 폰트를 정해놓고 그걸 이용하게 하지만 웹사이트가 다른 폰트를 사용하기로 설정해뒀다면 그걸 따르는데 문제는 bold체의 경우 작은 글씨일 때 저렇게 번지는 현상이 나타나기도 한다.
그냥 봐도 큰 지장은 없지만 보기 싫어서 바꾸고 싶어 하는 사람들이 있을 것이다.
그래서 필자도 문제를 찾아보고 해결하였기에 방법을 공유한다.
크롬 확장프로그램 Stylish 사용하기
크롬 확장프로그램이긴 하지만 엣지, 웨일 등은 모두 크롬 기반이기 때문에 설치해서 사용할 수 있다.
위 이미지를 누르면 설치 페이지로 넘어가도록 연결해두었다.
Stylish는 웹페이지의 css를 수정해서 사용자가 원하는 모양으로 보이게 해주는 확장 프로그램이다.
우리는 폰트만 변경할 것이지만 그 밖에도 재미있는 테마가 많으니 설치 후 홈페이지 한 번 둘러보고 원하는 것 설치해도 좋다.
링크를 통해 설치 페이지로 이동했다면 Chrome에 추가 버튼을 누르자.
bold 해결하는 스타일 만들기
1. 크롬 우측 상단 퍼즐 버튼을 눌러 확장 프로그램을 연다.
2. Stylish를 선택한다.
3. 우측 상단에서 ... 버튼을 클릭한다.
4. Create New Style을 클릭한다.
그럼 스타일을 작성할 수 있는 새로운 탭이 열린다.
1. Code에 적용할 코드를 넣어준다.
2. 원하는 이름을 적는다. (아무거나 상관없다.)
3. Save를 눌러 저장한다.
적용할 코드
@font-face {
font-family: "돋움";
src: local("Malgun Gothic");
font-weight: bold;
}
@font-face {
font-family: "돋움체";
src: local("Malgun Gothic");
font-weight: bold;
}
@font-face {
font-family: dotum;
src: local("Malgun Gothic");
font-weight: bold;
}
@font-face {
font-family: DotumChe;
src: local("Malgun Gothic");
font-weight: bold;
}
body {
font-family: "Malgun Gothic" ;
}이렇게 복사해서 붙여 넣기 하면 된다.
사람마다 설정하는 게 다른데 볼드체가 아닌 일반체도 변경하게끔 추가하는 경우도 있고 돋움 말고 굴림, 바탕, 궁서체를 추가하는 경우도 있다.
만약 그렇게 하길 원한다면 @font-face 부분을 복사한 뒤 변경하기 원하는 폰트의 이름을 font-family에 적고 일반이라면 font-weight : bold; 부분을 삭제하고 볼드라면 저 부분을 그대로 두면 된다.
해당 코드는 맑은 고딕으로 변환되게 되어있는데 원하는 다른 폰트가 있다면 src: local("원하는 폰트 이름") 여기를 수정해주면 적용이 가능하다.
스타일 끄고 켜기
경우에 따라 스타일을 끄고 싶을 때도 있을 것이다.
그럴 때는 stylish를 삭제하지 말고 아래에서 비활성화해주면 된다.
1. 확장 프로그램에서 Stylish를 선택한다.
2. Installed를 선택한다.
3. Active 옆 버튼을 눌러 비활성화한다.
문제 해결에 도움이 되길 바란다.
※ 함께 보면 좋은 글
'IT > IT 정보' 카테고리의 다른 글
| 아이패드 프로, 미니, 에어 비교 (0) | 2022.06.23 |
|---|---|
| 워크넷 직업심리검사 후기 (0) | 2022.06.22 |
| 최고의 무료 판서프로그램 아이캔줌잇 (0) | 2022.06.21 |
| 약국 야간휴일 조제료 가산 제도 (0) | 2022.06.21 |
| 이미지 jfif로 저장되는 문제 해결법 (0) | 2020.12.06 |
