본문 바로가기
CSS

CSS-Font & Text

by Hrin_0820 2020. 8. 10.

1. font-family : 글꼴 지정

첫번째 지정한 폰트가 사용자 컴퓨터에 설치되어 있지 않은 경우, 다음 지정된 폰트가 적용된다.

따라서 마지막에 지정하는 폰트는 OS에 기본적으로 설치되어 있는 generix-family폰트를 지정해야 한다.

generic-family 폰트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-family</title>
    <link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">
    <style>
        .serif{font-family: "Times New Roman", Times, serif}
        .sans-serif{font-family: Arial, Helvetica, sans-serif}
        .monospace{font-family: "Courier New", Courier, monospace}
        
        .google_font{font-family: 'Rowdies', cursive;}
        @import url('https://fonts.googleapis.com/css2?family=Rowdies&display=swap');
    </style>
</head>
<body>
    <h2>font-family</h2>
    <p class="serif">Times New Roman font</p>
    <p class="sans-serif">Arial font</p>
    <p class="monospace">Courier New font</p>
    <div class="google_font">Google font 
      <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Accusamus enim beatae debitis dicta fuga eveniet ut quasi labore 
      laborum obcaecati modi officiis, sequi ad molestiae. 
      Velit tenetur eius quia repudiandae.
    </div>
</body>
</html>
font-family

font-family

Times New Roman font

Arial font

Courier New font

Google font
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus enim beatae debitis dicta fuga eveniet ut quasi labore laborum obcaecati modi officiis, sequi ad molestiae. Velit tenetur eius quia repudiandae.

2. font-size : 텍스트 크기 지정

px (해상도-기본 단위) % (부모 요소 기준) em (부모 요소 기준) pt (포인트-기본단위)
12px 75% 0.75em 8pt
13px 81.3% 0.813em 9pt
14px 87.5% 0.875em 10pt
15px 93.80% 0.938em 11pt
16px 100% 1em 12pt
17px 106.3% 1.063em 13pt
18px 112.5% 1.125em 14pt
19px 118.8% 1.188em 15pt
20px 125% 1.25em 16pt 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-size</title>
    <style>
        .font-size-40{font-size: 40px;}
        .font-size-2x{font-size: 2em} /*기본 16px의 2배 = 32px*/
        .font-size-150ps{font-size: 150%;} /*기본 16px의 150%(1.5배) = 24px*/
        .font-size-large{font-size: large} /*18px*/
        .font-size-small{font-size: small} /*13px*/
    </style>
</head>
<body>
    <p class="default">default font size: 16px</p>
    <p class='font-size-40'>font-size: 40px</p>
    <p class='font-size-2x'>font-size: 2.0em</p>
    <p class='font-size-150ps'>font-size: 150%</p>
    <p class='font-size-large'>font-size: large</p>
    <p class='font-size-small'>font-size: small</p>
</body>
</html>
font-size

default font size: 16px

font-size: 40px

font-size: 2.0em

font-size: 150%

font-size: large

font-size: small

3. font-weight : 텍스트 굵기 (bold/nomal) , font-style : 텍스트 기울기 (italic/nomal)

   font-variant : 작은 대문자 설정 (small-caps/nomal), line-height : 줄간격 지정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-weight, style, variant / line-height</title>
    <style>
        .p1{
            font-size: large; /* 18px */
            font-weight: bold; /* 굵게 */
            font-style: italic; /* 기울임꼴 */
            font-variant: small-caps; /* 작은 대문자로 설정 */
            line-height: 1em; /* 100% */
        }
        .p2{
            font-size: 16px;
            font-weight: normal; 
            font-style: normal;
            font-variant: normal;
            line-height: 1.6em;
        }
    </style>
</head>
<body>
    <p class="p1">
        일회용 mask의 기본적인 기능으로는 <br>
        김서림 방기 기능, <br>
        편안한 ear band 등이 있다.
    </p>
    <hr>
    <p class="p2">
        일회용 mask의 특수한 기능으로는 <br>
        입술이 닿지 않는 접이식 구조, <br>
        외부 유해물질로 부터의 효과적인 보호 (MB가공) 등이 있다.
    </p>
</body>
</html>
font-weight, style, variant / line-height

일회용 mask의 기본적인 기능으로는
김서림 방기 기능,
편안한 ear band 등이 있다.

일회용 mask의 특수한 기능으로는
입술이 닿지 않는 접이식 구조,
외부 유해물질로 부터의 효과적인 보호 (MB가공) 등이 있다.

4. font-shorthand

font : style(optional)  variant(optional)  weight(optional)  size(mandatory)  line-height(optional)  family(mandatory)

/* size | family */
font: 2em "Open Sans", serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/1.2 monospace;

/* style | variant | weight | size/line-height | family */
/* font-variant: small-caps; 소문자를 대문자로 만든다. 단 크기는 일반 대문자에 비해 작다.*/
font: italic small-caps bolder 16px/3 cursive;

 

저작자표시

'CSS' 카테고리의 다른 글

CSS-문단(paragraph) 관련 스타일  (0) 2020.08.12
CSS-Font & Text 2  (0) 2020.08.11
CSS-선택자(selector)4 : 가상요소 선택자  (0) 2020.08.08
CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자  (0) 2020.08.07
CSS-선택자(selector)2 : 속성선택자  (0) 2020.08.07

관련글

댓글

티스토리툴바