CSS에서 특정 문자만 다른 글꼴을 사용하게 하는 방법
Posted On 2020-05-03
아래 예제는 기본 폰트는 굴림으로 하되, 일부 문자(〈〉《》「」『』【】〔〕〖〗〘〙〚〛, 유니코드로 U+3008-3011, U+3014-301B, U+301D-301F)만 맑은 고딕으로 처리되게 하는 예이다.
<!DOCTYPE HTML>
<html>
<head>
<title>테스트</title>
<style>
@font-face {
/* Special이라는 이름의 임시 폰트를 정의 */
font-family: 'Special';
/* 컴퓨터에 설치돼 있는(local) 맑은 고딕(Malgun Gothic) 폰트를 사용 */
src: local('Malgun Gothic');
/* 유니코드의 코드 넘버 3008~3011, 3014~301B, 301D~301F에 해당하는 문자들만 Special 폰트에 포함 */
unicode-range: U+3008-3011, U+3014-301B, U+301D-301F;
}
/* 페이지 전체 폰트를 지정 */
* {
/* Special이라는 임시 폰트를 먼저 지정하고, Special에 포함되지 않은 문자들은 굴림(Gulim)으로 지정 */
font-family: 'Special', 'Gulim';
}
</style>
</head>
<body>
<p>일반 문자의 폰트는 굴림이지만 「」는 맑은 고딕입니다.</p>
</body>
</html>
unicode-range : 란에다 별도 폰트를 지정할 문자의 유니코드 넘버를 지정해 주면 된다. 쓰는 방법은 이 문서를 참고할 것.
만약 웹폰트를 사용할 경우 @font-face의 src: 부분을 local('폰트명') 형태가 아닌 url('웹폰트 URL')로 바꿔 써주면 된다.
이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.