Jam's story

[CSS] 웹글꼴 본문

WEB/CSS

[CSS] 웹글꼴

애플쩀 2022. 5. 26. 12:51

글꼴 파일은

ttf 트루타입글꼴 :1980년대 후반 Apple/MS 개발한 표준 글꼴

otf 오픈타입글꼴 

woff 웹 오픈글꼴 형식 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       @font-face {
           font-family: myFirstWebFont;
           src: url('../images/sansation_bold.woff');
           font-weight: bold;
            
        }
       *{
            font-family: myFirstWebFont;
        }

    </style>
</head>
<body>
    <pre>
        웹 글꼴 사용: 클라이언트에 설치되지 않은 글꼴을 웹 서버에서 글꼴 파일 자동으로 다운로드 -> 사용자 사용
    </pre>
    <h1>font-face</h1>
    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit est laudantium ut quo neque exercitationem optio quod alias expedita, mollitia fugit excepturi sapiente minus voluptatibus, temporibus, id esse repudiandae.</div>
    <p><b>Note</b>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, modi recusandae, neque quia veniam fuga fugit quam laboriosam blanditiis ratione atque explicabo quos aliquid delectus et quasi ex libero sed?</p>
</body>
</html>

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 2D, 3D 변환 transform, translate  (0) 2022.05.26
[CSS] 2D 변환  (0) 2022.05.26
[CSS] 텍스트 속성  (0) 2022.05.26
[CSS] text-shadow, box-shadow  (0) 2022.05.26
[CSS] 그라디언트  (0) 2022.05.26
'WEB/CSS' Related Articles more
Comments