인터넷에서 전문적인 분야의 글쓰기를 할 때 일반적인 폰트로 구현이 안 되는 경우가 있습니다. 가령 헬라어, 히브리어 또는 프랑스어의 모음에 찍힌 à, é, è, ê, î, ô, ù, û 악센트나 세디 ç같은 철자, 또는 독일어의 움라우트 Ä, ä, Ö, ö, ß, Ü, ü, ß, 그밖의 전공상의 특수 기호들이 그렇습니다.
이런 문자들이 지금 이 글에서처럼 이상 없이 잘 보이는 경우는 해당 폰트(글꼴)가 그 문자들의 대역폭을 갖고 있기 때문입니다.
영문 서체의 경우 1931년도부터 개발된 Times New Roman과 같이 유서 깊은 폰트는 10만 개에 가까운 캐릭터를 갖고 있기 때문에 거의 모든 언어와 기호를 구현합니다. 그러나 한글 폰트는 그 대역폭이 좁습니다.
한글 철자나 영문 철자처럼 일반 철자는 자간에 맞게 벡터가 구현되지만 그외의 언어나 부호 구간은 자간과 행간을 고려하지 않고 대충 모양만 뜨게 해놓거나 아예 개발자가 개발할 때 그려넣지 않은 경우가 태반입니다. 심지어 한글은 이탤릭체도 표준 방식이 아닌 폰트가 많습니다. 소프트웨어에서 비틀어 주는 기능에만 의존하죠. (그런 것을 감안하면 한글 폰트 값은 무척 비싼 것임.)
이럴 경우는 해당 언어의 문자나 그 구간을 지원하는 다른 폰트로 다 잡아줘야 하는데, 문서 작성시 이것을 일일이 지정한다는 것이 무척 불편한 과정이고, 특히 이미 발행된 웹 문서에 일괄 적용하기 위해서는 다음과 같은 코딩이 유용할 것입니다. (그뿐 아니라 특별한 한글 폰트를 쓰고 싶은데 그 특수 문자를 지원하지 않는 폰트인 경우 유용합니다.)
이 샘플은 한글을 ‘나눔 명조’라는 폰트로, 그리고 헬라어 문자 구간을 다른 폰트로 적용한 스타일입니다. 우선 한번 보시겠습니다.
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
.title-view h4.title{
font-family: 'Nanumhan', Nanum Myeongjo,sans-serif !important;
}
@font-face {
font-family: 'Nanumhan';
src: local('Courier New');
unicode-range: U+0370-03FF, U+1F00-1FFF;
}
설명.
@import 라인은 구글 서버에서 한글 폰트로 지정할 ‘나눔 명조’를 불러들인 줄입니다. (여러분이 쓰고자 하는 기본 폰트의 url을 찾아 기입하면됩니다.)
.title-view h4.title{ } 구간은 이 스니펫을 적용하고 싶은 부분 또는 클래스에 대한 구간입다. 현재 이 샘플은 웹 문서 중에서 타이틀 한 곳에만 이 스니펫을 적용하고자 한 샘플입니다. 아래 이미지를 보면 ‘시므온(Συμεών)에 관한 기호와 해석’ 부분의 클래스 명칭이 바로 h4.title입니다(브라운 색 부분). 만약 이 코드를 적용하지 않았다면 한글 ‘나눔 명조’의 그리스어 캐릭터는 엉터리이므로 자간이 흩어져 보였을 것입니다. 타이틀 전체를 그냥 한글 폰트가 읽어내기 때문입니다.
이 타이틀-클래스의 내용을 설명하겠습니다.
font-family를 정의한 것입니다. 다음 라인을 유의하여 보시기 바랍니다.
‘Nanumhan’, Nanum Myeongjo,sans-serif !important;
나눔 명조를 ‘Nanumhan’이란 명칭으로 정의한 것입니다. Nanum Myeongjo는 나눔 명조 폰트의 실제 명칭이지만 ‘Nanumhan’은 내가 지어낸 이름입니다. Nanum Myeongjo(나눔 명조)를 포함하는 묶음을 명칭한 것입니다. 이 라인을 여러분이 사용하고자 하는 한글 폰트의 명칭을 잘 확인하고 작성하면 됩니다.
그런 다음 @font face 라인입니다. 이 라인이 헬라어(또는 여러분이 원하는 캐릭터)를 나눔 명조가 아닌 다른 폰트로 바꾸는 구간입니다. 원리를 위해 이해하기 위해 몇 가지 상식적으로 알아두면, 일반적으로 방문자가 해당 웹 문서에 접근했을 때 작동하는 폰트는 두 가지 형식으로 호출됩니다. 하나는 방문자의 기기에 있는 폰트를 불러내는 방식이고, 다른 하나는 온라인 상에서 폰트를 제공하는 방식입니다. 앞서 @import시킨 ‘나눔 명조’는 구글 서버에 있는 것을 꺼내온 것이겠죠? (방문자가 ‘나눔 명조’를 가지고 있지 않은 경우가 많기 때문에.)
이 @font face라인은 후자의 방식입니다. 방문자 기기에 있는 폰트를 호출하는 거죠.
src: local(‘Courier New’)
방문자 기기에 있는 ‘Courier New’를 호출하는 명령입니다. Courier New 폰트는 Times New Roman과 함께 가장 널리 사용되는 영문 폰트 중의 하나입니다. 대부분의 사용자 PC에 내장되어 있습니다. Times New Roman과 마친가지로 Courier New가 헬라어 전체 캐릭터를 미려하게 지원해줍니다.
그런데 이것만 가지고는 안 되고 다음 라인을 꼭 기입해주셔야 합니다.
unicode-range: U+0370-03FF, U+1F00-1FFF;
헬라어 유니코드 구간입니다. 인터넷 문서 폰트가 유니코드로 표준화 된 것은 얼마 안 되었을 겁니다. A, B, C, D $, % ….기타 등등 모든 캐릭터는 기계적인 고유 이름을 가지고 있는데 그것을 유니코드라고 합니다. U+0370-03FF가 일반적인 헬라어 알파벳 구간이고, U+1F00-1FFF 이것까지 써주어야 악센트 따위까지 잘 표현됩니다.
이것은 헬라어의 경우이지만 여러분의 특수 언어/부호는 그것에 맞는 폰트/유니코드를 적용해서 고치시면 되겠죠.
그런데 가장 중요한 것이 이 라인입니다.
font-family: ‘Nanumhan’;
@font face 안에다 위의 라인을 반드시 기입해줘야 합니다. 앞서 h4.title 클래스를 위해 선언해주었던 폰트 묶음을 불러낸 것입니다. 이것은 일종의 트릭 기술입니다. h4.title을 Nanumhan으로 입혀주면서 위의 유니코드 구간 즉 헬라어 폰트는 방문자가 가지고 있는 기기의 폰트를 호출했기 때문입니다. 이렇게 해서 ’나눔 명조’(Nanumhan) 속에서 지정된 폰트만 Courier New으로 바꿔치기 한 것입니다.
만약 Courier New라는 폰트가 방문자의 기기에 내장되어 있지 않다면 그 클래스 전체는 Nanumhan(나눔 명조)로 적용될 수밖에 없을 겁니다.
요즘은 스마트폰으로 접근하는 분이 절반이죠. 스마트폰에는 당연히 Courier New가 없습니다. 그래서 다음과 같이 src:라인을 여러분이 목적하는 방문자 기기에 맞게 폰트 지정을 해주시면 됩니다. 이상.
src: local('Courier New'), local('Roboto-Light'),local('Droid Sans'), local('Noto Sans'), local("SFNSText-Light"), local("HelveticaNeueDeskInterface-Light"), local("LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Tahoma");