웹 표준 팁) 폰트를 굵게 하려면 <b>태그가 아니라 css에서 font-weight 로 설정을 해 주는 게 좋습니다. 강조는 <strong>, <em> 사용~
폰트를 굵게 하려면 CSS에서 font-weight 속성을 사용합니다. 값은 숫자도 가능하지만, 세세하게 조정되는 폰트가 없기 때문에 보통 bold(800), normal(400) 을 사용하죠.
폰트 중에는 보통과 굵은 폰트를 따로 제공하는 경우가 있는데, 이 경우에는 자간을 맞춰 놓았기 때문에 굵게 만들어도 어색하지 않습니다. 예를 들어, '맑은 고딕'의 경우에는 '맑은 고딕 Bold', '나눔고딕'의 경우에는 '나눔고딕 Bold'를 제공하기 때문에 font-weight:bold 로 하더라도 폭 변화가 없습니다. '맑은 고딕'이 설치되어 있다면 아래 예제에서 굵게 하여도 폭이 같음을 알 수 있습니다.
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
그런데 윈도우에서 많이 사용하는 기본 폰트인 '돋움', '굴림', '바탕' 폰트는 굵은 폰트가 없습니다. 이런 폰트를 굵게 하면 전체적으로 폭이 늘어납니다. 무슨 말씀이냐 하면,
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
이처럼 굵게 만들면 폭이 늘어나게 됩니다. 획이 굵어졌으니 당연한 현상이죠.
이로 인해 그냥 글이라면 괜찮지만, 만약 마우스를 올렸을 때(hover) 굵게한다든가, 메뉴에서 현재 위치를 나타내는 링크를 꾸밀 때에는 조금 문제가 될 수 있습니다. 폭은 그대로이면서 굵어지기만 하면 좋을텐데 그게 안 되니 정신 없이 되어 버리죠. 아마 웹 디자이너나 퍼블리셔 중에 이 문제 때문에 고민하신 분들이 많을 겁니다.
이럴 경우 자간을 정하는 letter-spacing을 적용하여 해결할 수 있습니다. 즉, CSS에 letter-spacing:-1px 을 추가하면 아래와 같이 폭이 거의 같아집니다.
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
지쳐있던 가슴이 다시 숨쉬고 가난해진 마음이 빛을 찾았어
영원토록 이렇게 너의 손잡고 같이 걷고 싶어 우리 둘 만의 세상에 사랑하는 내 사람과 함께
이를 활용하여 다음과 같이 CSS를 구성할 수 있겠죠. 단, 글꼴은 Bold 체가 없는 경우에만 적용해야 합니다.
1 |
#nav a { color:#239; } |
2 |
#nav a:hover { color:#923; font-weight:bold; letter-spacing:-1px; } |
그런데 이 방법은 맥이나 리눅스 등에서는 의도하는 대로 안 나올 수 있으므로 참고하세요. 우리나라에서는 굴림이나 돋움을 많이 사용하므로 대부분의 사용자에게 도움이 될 것으로 보입니다. ^^
출처 - http://easyone.tistory.com/250
