css 폰트,글꼴에 대해서

CSS

css 폰트,글꼴에 대해서

Neda 2022. 8. 2. 17:43

글꼴 스타일: 텍스트 글꼴에 영향을 주는 것들( 글꼴, 크기, 색상, 굵기, 기울임꼴, 밑줄 등)
텍스트 레이아웃 스타일: 텍스트의 레이아웃에 영향을 주는 것들( 자간, 행간, 정렬 등)

색상(color)

    <p style="color:blue">blue color</p>
    <p style="color:red">red color</p>
    <p style="color:rgb(0, 235, 4)">green color</p>

blue color

red color

green color

글꼴(font-family)

serif: 획 끝에 디테일이 있는 글꼴
sans-serif: 세리프가 없는 글꼴
monospace: 문자의 너비가 고정인 글꼴
cursive: 글리프가 연결되어 필기를 에뮬레이트하기 위한 글꼴
fantasy: 장난스러운 장식용 글꼴

글꼴 스택이란?

글꼴 여러 개를 쉼표로 구분하여 나열하면 브라우저는 맨 앞의 글꼴부터 순서대로 사용 가능한 글꼴을 찾아 적용

<p style="font-family: Georgia, serif">font-family: Georgia, serif</p>
    <p style="font-family: 'Gill Sans', sans-serif">
      font-family: 'Gill Sans', sans-serif
    </p>
    <p style="font-family: sans-serif">font-family: sans-serif</p>
    <p style="font-family: serif">font-family: serif</p>
    <p style="font-family: cursive">font-family: cursive</p>
    <p style="font-family: system-ui">font-family: system-ui</p>
    <p style="font-family: monospace">font-family: monospace</p>
    <p style="font-family: fantasy">font-family: fantasy</p>
    <p style="font-family: emoji">font-family: emoji</p>

font-family: Georgia, serif

font-family: 'Gill Sans', sans-serif

font-family: sans-serif

font-family: serif

font-family: cursive

font-family: system-ui

font-family: monospace

font-family: fantasy

font-family: emoji

웹안전 글꼴 찾아보기 ↓

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Join to access discussion forums and premium features of the site.

www.cssfontstack.com

글꼴 크기 단위 (font-size)

px : 픽셀 단위로 절대 단위
em : 부모 요소의 글꼴 크기와 같으며 상대 단위
rem(root em) : 문서에서 루트 요소의 글꼴 크기와 같으며 상대 단위

태그별 font-size 기본값

기본적으로 html에서 font-size는 16px임
h1: 2em -> 32px
h2: 1.5em -> 24px
h3: 1.17em -> 18.72px
p: 1em -> 16px

글꼴 스타일(font-style)

normal: 일반 글꼴
italic: 기울임꼴
oblique: 기울임꼴 시뮬레이션 버전

<p style="font-style: normal">font-style: normal</p>
<p style="font-style: italic">font-style: italic</p>
<p style="font-style: oblique">font-style: oblique;</p>

font-style: normal

font-style: italic

font-style: oblique;

글꼴 굵기(font-weight)

normal: 일반 글꼴 굵기. 수치로는 400
bold: 굵은 글꼴 굵기.수치로는 700
lighter: 상위 요소보다 한 단계 더 얇은 글꼴 굵기 (상대 굵기)
bolder: 상위 요소보다 한 단계 더 굵은 글꼴 굵기 (상대 굵기)
<number>(1~1000값): 숫자가 높을수록 굵은 글꼴을 의미

font-weight:100

font-weight:200

font-weight:300

font-weight:400

font-weight:500

font-weight:600

font-weight:700

font-weight:800

font-weight:900

상대 굵기

상대 굵기는 100(thin), 400(normal), 700(bold), 900(heavy)의 4가지만 고려한다.

상속된 값	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

일반적인 글꼴 무게별 명칭

Value	설명
100	Thin
200	Extra-light
300	Light
400	Normal(Regular)
500	Medium
600	Semi-bold(Demi-bold)
700	Bold
800	Extra-bold(Ultra-bold)
900	Black(Heavy)

텍스트 변환(text-transform)

텍스트를 대문자로 표시하는 방법을 지정

none: 대소문자가 바뀌지 않음
capitalize: 각 단어의 첫 글자를 대문자로 변환
uppercase: 모든 문자를 대문자로 변환
lowercase: 모든 문자를 소문자로 변환
full-width: 문자를 정사각형 안에 강제로 넣어 일반적인 동아시아 문자로 정렬 가능하도록 변환
full-size-kana: 모든 작은 가나 문자를 같은 크기의 가나로 변환

<p style="text-transform: none">Lorem ipsum dolor sit</p>
<p style="text-transform: capitalize">Lorem ipsum dolor sit</p>
<p style="text-transform: uppercase">Lorem ipsum dolor sit</p>
<p style="text-transform: lowercase">Lorem ipsum dolor sit</p>
<p style="text-transform: full-width">Lorem ipsum dolor sit</p>
<p style="text-transform: full-size-kana">Lorem ipsum dolor sit</p>

Lorem ipsum dolor sit

텍스트 장식(text-decoration)

텍스트를 장식하기 위한 선의 모양을 지정

아래의 4개 속성을 포함

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness

text-decoration-color

텍스트 장식 줄의 색상을 지정

text-decoration-line

none: 텍스트 장식이 없음
underline: 텍스트 아래에 장식 줄
overline: 텍스트 위에 장식 줄
line-through: 텍스트의 가운데를 통과하는 줄
blink: 텍스트가 깜박거림. 더 이상 사용 X

    <p style="text-decoration-line: none">Lorem ipsum dolor sit</p>
    <p style="text-decoration-line: underline">Lorem ipsum dolor sit</p>
    <p style="text-decoration-line: overline">Lorem ipsum dolor sit</p>
    <p style="text-decoration-line: line-through">Lorem ipsum dolor sit</p>

Lorem ipsum dolor sit

text-decoration-style

장식 줄에 대한 스타일 지정

solid: 단일 선
double: 이중선
dotted: 점선
dashed: 긴점선
wavy: 물결선

<p style="text-decoration-style: solid; text-decoration-line: underline">
Lorem ipsum dolor sit
</p>
<p style="text-decoration-style: double; text-decoration-line: underline">
Lorem ipsum dolor sit
</p>
<p style="text-decoration-style: dotted; text-decoration-line: underline">
Lorem ipsum dolor sit
</p>
<p style="text-decoration-style: dashed; text-decoration-line: underline">
Lorem ipsum dolor sit
</p>
<p style="text-decoration-style: wavy; text-decoration-line: underline">
Lorem ipsum dolor sit
</p>

Lorem ipsum dolor sit

text-decoration-thickness

장식 줄에 대한 두께 지정

auto: 브라우저가 적절한 두께 지정
from-font: 글꼴 파일의 기본 두께에 대한 정보를 사용. 없다면 auto처럼 브라우저가 지정
<length>: 길이 단위를 가지는 값을 사용
<percentage>: 글꼴 두께인 1em에 대한 퍼센트 값을 사용

<p style="text-decoration: solid underline auto">Lorem ipsum dolor sit</p>
<p style="text-decoration: solid underline from-font">
  Lorem ipsum dolor sit
</p>
<p style="text-decoration: solid underline 0.2em">Lorem ipsum dolor sit</p>
<p style="text-decoration: solid underline 3px">Lorem ipsum dolor sit</p>
<p style="text-decoration: solid underline 20%">Lorem ipsum dolor sit</p>

Lorem ipsum dolor sit

텍스트 그림자(text-shadow)

offset-x: 그림자 수평 오프셋. <length>값
offset-y: 그림자 수직 오프셋. <length>값
blur-radius: 그림자 반경. <length>값
color: 그림자 색상. <color> 값

<p style="text-shadow: 4px 4px 4px black;">text-shadow</p>

text-shadow

텍스트 정렬(text-align)

start: 방향이 왼쪽->오른쪽일 경우 left와 같고, 오른쪽->왼쪽일 경우 right와 같다
end: 방향이 왼쪽->오른쪽일 경우 right와 같고, 오른쪽->왼쪽일 경우 left와 같다
left: 줄 상자의 왼쪽에 정렬
right: 줄 상자의 오른쪽에 정렬
center: 줄 상자 중앙에 정렬
justify: 마지막 줄을 제외하고 줄 상자의 왼쪽 및 오른쪽 가장자리를 기준으로 간격을 지정해 정렬
match-parent: inherit과 유사하지만 start, end 값이 상위 요소에 따라 계산되고 적절한 left 또는 right 값을 가진다.

<div style="max-width: 400px; border: 2px solid black">
<p style="text-align: start">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: end">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: left">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: right">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: center">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p style="text-align: match-parent">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit.

줄 높이(line-height)

줄 상자의 높이를 지정

키워드 normal, <number>, <length>, <percentage> 값 사용 가능
접근성을 위해 1.5이상을 하는 것이 좋으며, 1.5 - 2를 권장

<style>
      #wrapper {
        width: 200px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px dashed navy;
      }
      #box_line_height {
        width: 200px;
        text-align: center;
        animation: 3s infinite variation-line-height;
      }
      @keyframes variation-line-height {
        0% {
          line-height: 0em;
        }
        50% {
          line-height: 2em;
        }
        100% {
          line-height: 0em;
        }
      }
    </style>
    <div id="wrapper">
      <div id="box_line_height">
        <p>
          Far out in the uncharted backwaters of the unfashionable end of the
          western spiral arm of the Galaxy lies a small unregarded yellow sun.
        </p>
      </div>
    </div>

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

문자 간격(letter-spacing)

텍스트 문자 사이 간격 지정

키워드 normal, <length> 값 사용 가능

<style>
      #wrapper {
        width: 200px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px dashed navy;
      }
      #box_letter_spacing {
        width: 200px;
        text-align: center;
        animation: 3s infinite variation-letter-spacing;
      }
      @keyframes variation-letter-spacing {
        0% {
          letter-spacing: 0em;
        }
        50% {
          letter-spacing: 0.3em;
        }
        100% {
          letter-spacing: 0em;
        }
      }
</style>
<div id="wrapper">
  <div id="box_letter_spacing">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </p>
  </div>
</div>

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

단어 간격(word-spacing)

단어 사이 간격을 지정

키워드 normal, <length>,<percentage> 값 사용 가능

<style>
      #wrapper {
        width: 200px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px dashed navy;
      }
      #box_word_spacing {
        width: 200px;
        text-align: center;
        animation: 3s infinite variation-letter-spacing;
      }
      @keyframes variation-letter-spacing {
        0% {
          word-spacing: 0em;
        }
        50% {
          word-spacing: 0.3em;
        }
        100% {
          word-spacing: 0em;
        }
      }
</style>
<div id="wrapper">
  <div id="box_word_spacing">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </p>
  </div>
</div>

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

가변 글꼴

가변 글꼴은 폰트의 가로축, 세로축, 크기 등을 마음대로 조정할 수 있는 가변적인 글꼴이다.

예시)

출처: https://codepen.io/davelab6/pen/QWEJpWa

가변 글꼴에 대해 알아보기 ↓

OpenType Font Variations overview (OpenType 1.9) - Typography

OpenType Font Variations overview (OpenType 1.9)

docs.microsoft.com

구글: 가변 폰트의 놀라운 활용법 | 요즘IT

이제 구글 폰트에서 가변 폰트를 사용할 수 있게 되었습니다. 그런 의미에서 오늘 우리는 가변 폰트가 무엇인지, 그리고 디지털 디자인 영역에서 개발자에게 효율을 더해주는 폰트 압축과 디

yozm.wishket.com

저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS 링크 스타일링 (0)	2022.08.04
CSS 스타일 목록 (0)	2022.08.03
CSS color (0)	2022.07.27
CSS에서 사용하는 값과 단위 (0)	2022.07.27
CSS box model (0)	2022.07.27

현재글css 폰트,글꼴에 대해서

더 적게, 그러나 더 낫게 (Less, but better)

Mocking, Image 최적화, http, vitest, 한글폰트, AWS, TypeScript, getAuth, MSW, frontendTesting, TailwindCSS, createUserWithEmailAndPassword, JavaScript, vite, TAILWIND, 내일배움캠프, node, initializeApp, firebase, signInWithEmailAndPassword,

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

neda의 블로그