072DATA

HTML 글꼴 관련 스타일 본문

FrontEnd/HTML, CSS, JavaScript

HTML 글꼴 관련 스타일

0720 2023. 11. 28. 16:04

font-family : 글꼴을 지정할 때 사용

    <p id="ff1">글꼴테스트1</p>
    <p id="ff2">글꼴테스트2</p>
    <p id="ff3">글꼴테스트3</p>


    <!---------------------- style---------------------->
    <style>
        #ff1{ font-family: 궁서체;}
        #ff2{ font-family: 굴림체;}
        #ff3{ font-family: 돋움체;}
    </style>

 

사용할 id의 글자{ font-family:글꼴명;}

글꼴은 컴퓨터내에 저장된 글꼴을 사용하던가

https://fonts.google.com/ 에서 다운 받음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Single+Day&display=swap" rel="stylesheet">
    <title>글꼴관련 스타일</title>
</head>

이런식으로 링크를 추가해준 뒤 +기호가 있으면 공백으로 채워서 다음과 같이 입력한다

	 <p id="ff4">글꼴테스트5</p>

    <!---------------------- style---------------------->
    <style>
        #ff4{ font-family: 'Single Day';}

참고로 글꼴 제목 제데로 입력하려면 (family=)가 나온 바로 뒤의

글자부터 (&)표시가 나오기 전 글자까지 입력 후 + 기호가 있으면 공백으로 채워주고 작은 따옴표를 덮어줌 

css2?family=Dokdo&family=Single+Day&display=swap

(굵게 밑줄 친게 글꼴의 제목들임)

 

그외 글꼴 관련 코드

 

font-style : 텍스트 문구를 기울이고자 할 때
선택자 { font-style: normal|italic|oblique; }

nomal : 알잘딱하자

 italic : 필기체의 기울임 꼴

obliue : 원래 글자의 기울임 꼴

 

font-weight : 글꼴의 두께 지정
선택자 {
    font-weight:normal|bold|bolder|lighter|100|400|900;}

font-weight : 숫자 지정 하거나 굵게 하려면 bold 가늘게 하려면 lighter 사용하면 됨

 

font-size : 글꼴의 크기를 변경할 때 사용
선택자{ font-size:크기(px|em|%)

 

'FrontEnd > HTML, CSS, JavaScript' 카테고리의 다른 글

관계형 데이터베이스와 비관계형 데이터베이스  (0) 2024.07.18
BootStrap을 활용하여 페이지 구성하기  (1) 2024.07.17
CSS - Margin, Padding 정리  (0) 2024.07.16
CSS 텍스트 관련 스타일  (1) 2023.11.27
2023-11-23 : l  (0) 2023.11.23
'FrontEnd/HTML, CSS, JavaScript' Related Articles more