책 씹어먹는 즐거움

Font Weight

Font Weight는 글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.

만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다. 

이론적으로는 bolder와 lighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기를 보다 굵거나 얇게 만들 수 있다. 

혹은, 절대적인 굵기 단위인 100~900 사이의 숫자로 font-weight의 속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normal과 bold만 그 속성값으로 사용한다. 

다음과 같이 작성하여 0047_font_weight.html로 저장하고 실행해보자. 

실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다. 

Font Style

Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.

font-style 속성(property)은 세 가지 속성값을 갖는다.

Font Variant

Font Variant는 font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)은 소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다. 

작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0047 CSS의 Font Weight, Style, Variant.apkg

CSS에서 font-size 속성(property)으로 텍스트의 크기를 설정한다. 

body 요소에 적용되는 텍스트의 크기를 설정하는 규칙은 다음과 같이 작성하면 된다. 

font-size의 속성값(value)은 텍스트의 크기인데 이 텍스트의 크기 속성값이 한 가지 형식이 아니다. 

일단, font-size 속성의 속성값인 텍스트의 크기를 결정하는 형식은 크게 절대 크기(absolute size)와 상대 크기(relative size)로 분류할 수 있다.

절대 크기(absolute size)는 실제 길이(length) 단위인 mm(millimeters), cm(centimeters), in(inches), pt(points), pc(picas),  px(pixels) 등이다.

상대 크기(relative size)는 퍼센트(%)나 em 등이다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0042 텍스트의 크기 font-size 개요.apkg

Ankilog파일 문구 수정 2018-12-23 10:20

CSS는 font-family 속성(property)으로 텍스트의 font를 설정한다.

다음은 <p> 요소에 적용될 폰트를 설정한 CSS 규칙이다. 

font-family 속성에는 여러 개의 폰트를 지정할 수 있다. 각각의 폰트는 대소문자를 정확하게 맞춰서 작성되어야 하며 쉼표(,)로 구분한다. 그리고 마지막에는 항상 'sans-serif', 'cursive', 'monospace', 'serif', 'fantasy'의 일반 그룹(generic family) 이름을 넣는다(권장사항).

font-family 속성에 주어진 폰트들은 순차적으로 적용(fallback)된다. 즉, 브라우저에 font-family 속성으로 정의한 첫 번째 폰트가 없을 경우 그 다음 폰트를 시도하고, 그것도 없으면 다시 그 다음 글꼴을 시도하는 식으로 계속 이어진다.

위의 예문이라면 Verdana를 적용할 수 있는지 따져보고 적용할 수 없을 때  그 다음의 Arial로 넘어간다. Arial도 없으면 마지막으로는 브라우저에 설정된 sans-serif의 기본 폰트를 사용한다. 사용할 수 있는 폰트의 개수가 정해져 있는 것은 아니므로 위의 사례처럼 꼭 3개의 폰트를 나열할 필요는 없다.

폰트의 이름에 공백이 포함되어 있을 때는 큰 따옴표(“”)로 감싸주어야 한다. (예: "Times New Roman")

그렇다면 왜 font-family 속성에는 여러 개의 폰트를 쓰는 것일까?

OS나 브라우저에 따라서 지원하는 폰트가 다르기 때문이다. 어떤 폰트는 지원되고 어떤 폰트는 지원되지 않으므로 원하는 폰트들이 없을 때를 위하여 원하는 폰트를 차례로 배치하는 것이다. 전부 없다면 그나마 원하는 폰트와 비슷한 것을 쓸 수 있도록 일반 그룹(generic family) 계열의 이름을 마지막에 두는 것이다.

따라서 폰트를 설정할 때는 일단 원하는 폰트로 시작하고 마지막은 원하는 것과 유사한 일반 그룹(generic family)로 배치하는 것을 권장한다. 그러면 브라우저가 우리가 원하는 폰트들을 사용할 수 없을 경우 약간이나마 유사한 일반 그룹의 기본 지정된 폰트를 사용하기 때문이다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0041 CSS로 텍스트의 폰트 설정하기.apkg

폰트는 흔히 글꼴, 서체 등으로 불리는 것이지만 최근에는 폰트로 쓰는 경우가 많으므로 그냥 폰트라고 지칭한다. 

폰트는 그 종류가 수백 가지가 넘지만 그 일반적인 특성에 따라서 몇 가지 그룹으로 나뉘는데 이 그룹들을 generic family(일반 그룹)라고 한다. 보통 세리프(serif), 산세리프(sans-serif), 모노스페이스(monospace), 흘림체(cursive), 판타지(fantasy)가 자주 제시되는 generic family들이다.

세리프(serif)는 원래 ‘가는 장식 선’을 지칭하는 말이다. 이것이 폰트로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 폰트를 통칭하는 용어로 사용된 것이다. 세리프(serif) 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

한국에서는 세리프(serif)를 ‘명조’ 계열이라고 부른다.

다음의 폰트들이 세리프(serif)다.

산세리프(sans-serif)는 serif(장식)이 없다는 의미이며 획의 시작부터 끝까지 굵기가 변하지 않는 글꼴이므로 매우 깔끔한 느낌을 주고 가독성을 좋게 하기 위하여 주로 사용된다. 

한국에서는 산세리프(sans-serif)를 ‘고딕’ 계열이라고 부른다. 

이 폰트는 보통 세리프(serif) 폰트보다 컴퓨터 화면에서 가독성이 좋다. 

다음의 폰트들이 산세리프(sans-serif)다.

모노스페이스(monospace)는 폭이 일정한 폰트들의 그룹이다. 

이는 M과 I가 차지하는 공간의 폭이 똑같다는 것으로 타자기로 타이핑한 것 같이 기계적이고 투박한 느낌을 준다. 

주로 글자를 정확히 구분할 필요가 있는  소프트웨어 코드에서 자주 사용된다. 

다음의 폰트들이 모노스페이스(monospace)다.

흘림체(cursive)는 손으로 쓴 것 같은 폰트들이다. 

판타지(fantasy)는 Last Ninja, Impact 등 눈에 확 띄는 양식의 폰트다.

앞서 폰트로 제시된 Times New Roman, Georgia, Verdana, Arial Black, Trebuchet MS, Arial, Courier New, Monospace, Comic Sans MS, Impact  같은 개별 글꼴을 font family라고 한다. 

이는 해당 폰트의 기본 글자와 그 글자에 굵기(boldness), 너비, 이탤릭 등의 변화를 준 글자들이 하나의 집합체로 묶여 개별 글꼴이 되므로 font family라고 지칭하는 것이다.

※ Tistory 블로그에서 사용 가능한 폰트가 많지 않아서 일부만 제시함

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0040 글꼴, 서체, 폰트 개요.apkg

문서는 Anki 2.0 유저 매뉴얼을 번역한 문서입니다.

기본적으로 구글 번역을 통해서 초벌을 번역하고 이를 수정하는 방식으로 번역했습니다. 

또한, 본문에 충실한 직역보다는 매뉴얼을 숙지하기 쉽도록 의역 위주로 번역하였습니다.

Anki 매뉴얼 전체 개요 페이지 가기

Cards and Templates

 Installing Fonts(글꼴 설치하기)

Anki를 직장이나 학교의 컴퓨터를 통하여 사용하거나 하여 새로운 글꼴을 설치할 권한이 없을 수 있다.

또는, Anki를 모바일 기기에서 사용하고 있을 수도 있다.

이러한 경우 해당 글꼴을 사용하는 디바이스를 통하여 사용하지 않고 Anki에 직접 글꼴을 등록하여 쓸 수 있다.

이 모든 절차를 완료한 후에 템플릿을 다음과 같이 업데이트할 필요가 있다.

이러한 작업을 모두 수행한 다음부터는 전체 카드의 글꼴을 변경하거나 개별 필드의 글꼴을 변경할 수 있다.

전체 카드의 글꼴을 변경하려면 카드창의 스타일 섹션에서 .card의 중괄호 속에 있는 font-family: 행을 찾아 글꼴을 "myfont"로 변경하면 된다.

특정 필드의 글꼴만 변경하려면 앞서 설명한 필드 꾸미기 섹션을 참조하라.

<Mac에서 글꼴>

현재 내장된 글꼴은 OS X에서 기능하지 않는다. 사용자 정의 글꼴은 여전히 사용가능하지만 전체 시스템에 설치해야만 쓸수 있다.

Mac에서 시스템에 글꼴을 설치하려면 다음을 참조하라.

 http://support.apple.com/kb/HT2435?viewlocale=en_US&locale=en_US

Mac에서는 컴퓨터의 시스템 글꼴을 사용하고 다른 기기에서는 내장된 글꼴을 사용하도록 Anki를 설정할 수 있다.

우선, 카드의 앞면 또는 뒷면의 템플릿에 꾸미고 싶은 필드를 다음의 코드로 감싼다.

다음의 예에서 "FieldName"을 원하는 이름의 필드로 대체하면 된다.

그리고 스타일 섹션에서 위에서 언급한 font-face를 적용한 행의 다음에 이 문구들을 추가한다.

"Helvetica"를 시스템에 설치한 글꼴의 이름으로 변경하면 된다.

"myfont"는 내장된 글꼴을 참조하므로 그대로 유지하라.

Anki 매뉴얼 전체 개요 페이지 가기