The CSS font properties define the font family, boldness, size, and the style of a text.
font 속성은 텍스트의 모양과 사이즈 딱딱함의 정도 폰트의 족보를 정의한다.
CSS Font Families
In CSS, there are two types of font family names:
- generic family - a group of font families with a similar look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New Roman" or "Arial")
폰트 족보 (족보라는 표현이 맞는지 모르겠네..)
2가지 타입의 폰트 족보가 있다.
일반적인 족보 - Serif 나 Monospace 같은 비슷하게 생긴 폰트족보의 그룹
폰토 족보 Times New Roman 이나 Arial 과 같은 구체적인 폰트의 족보
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
폰트 족보
글자의 폰트 족보는 font-family 속성으로 설정한다.
font-family 속성은 fallback 시스템과 같은 몇가지 font 이름을 잡아야 한다.
(font-family 속성은 fallback 시스템처럼 몇가지 font를 나열한다?)
만일 브라우저가 처음 폰트를 지원하지 않는다면, 브라우저는 다음 폰트를 시도하고, 또 다음 폰트를 시도한다.
당신이 원하는 폰트로 시작하고, 마지막은 일반적은 폰트로 작성하라.
브라우저가 일반적인 족보안에서 유사한 폰트를 적용하기 위해선, if no other font are available? 이게 왜.?
주의 만일 폰트 족보의 이름이 한단어 이상이라면, " < 를 사용하세요 "Times New Roman" 처럼
하나의 폰트 족보 그이상은 , 로 명시되어진다.
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
폰트의 모양
font-style 속성은 italic 글자를 명시하기 위해 가장 많이 사용되어진다.
이 속성은 3가지 값을 가진다.
nomal : 글자를 평범하기 보여준다.
italic : 글자를 italics하게 보여준다.
oblique : 글자는 "leaning"이다 (oblique는 italic와 유사하지만, 적게 지원된다)
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
폰트의 크기
font-size의 속성은 글자의 크기를 설정한다.
글자의 크기를 관리할 수 있는 것은 web에서 매우 중요하다.
하지만, 문락을 머릿말처럼, 머릿말을 문단처럼 만들기 위해 글자 크기를 조정해서는 안된다.
적절한 html tag를 사용하세요. 머릿말을 위해선 <h1>에서 <h6>를 사용하고, 문단을 위해선 <p> tag를 사용하세요
font-size 값은 절대적이거나, 상대적인 값이 될수 있다.
절대적인 값
글자에 구체적인 크기의 값을 설정한다.
모든 브라우저내에서 글자의 크기를 변경하는 것을 허용하지 않는다.
절대적인 크기는 결과물의 물리적 사이즈를 알때, 유용하다.
상대적인 크기
주변 요소에 맞게 상대적으로 크기를 설정한다.
브라우저에서 글자의 크기를 변경하는 것을 허용한다.
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Em 값으로 폰트의 크기를 설정하기
브라우저의 메뉴에서 글자의 크기를 재조정하는 것을 허용하기 위해서, 많은 개발자들은 pixel 대신 em 을 사용한다.
em 값은 w3c에서 추천되어진다.
1em은 현재 font의 사이즈와 동등하다. 브라우저에서 기본적인 폰트사이즈는 16px이다. 그래서 기본 1em은 16px과 같다.
픽셀에서 em으로 변환하는 계산은 다음 공식이 이용되어질수 있다. pixcel / 16 = em
In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.
위의 예제안에서 em으로 설정된 글자의 크기는 이전에 pixel 로 설정된 에제와 크기가 같다. 하지만, em 크기로 설정할경우 모든 브라우저 내에서 글자의 크기를 조정하는 것이 가능하다.
불행하게도, 오래된 IE 버전에선 여전히 많은 문제점을 가지고 있다. 글자는 크게 만들어져야만 할때보다 커지거나, 작아져야 할때보다 더 작아진다.
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the <body> element:
퍼센트와 em의 결합을 사용하라.
모든 부라우저에서 잘 동작하는 해결책은 바디 오소에 기본적인 font-size 를 퍼센트로 설정하는 것이다.
Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!
우리의 코드는 지금 잘 동작한다. 이것은 모든 브라우저안에서 같은 크기의 글자크기를 보여줄 것이고, 글자의 크기를 재조정하거나, 브라우저의 줌을 허용한다.
Font Weight
The font-weight property specifies the weight of a font:
폰트의 무게
font-weight 속성은 폰트의 무게감을 명시한다.
Responsive Font Size
The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
상대적인 폰트의 크기
폰트의 크기는 vw 유닛으로 설정되어 질수 있다. vw유닛은 viewport width를 의미한다.
글자의 크기를 조절하는 방법은 브라우저 창의 크기를 따라간다.
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
글자의 변화?
font-varinat 속성은 글자가 samll-cap 모양으로 보여줄지 말지를 명시한다.
small-cap 폰트는 모든 소문자를 대문자로 변환한다. 하지만, 변환되어진 대문자는 기존의 대문자보다 작다.
'영어공부' 카테고리의 다른 글
| CSS Links (0) | 2020.01.11 |
|---|---|
| How To Add Icons (0) | 2020.01.09 |
| CSS Text (0) | 2020.01.08 |
| CSS Outline (0) | 2020.01.08 |
| CSS Box Model (0) | 2020.01.08 |
