[CSS]

[CSS] web Font

allrouvel 2024. 2. 22. 13:14
728x90
반응형
1. Google Fonts 웹을 통한 적용

 

 

ㅁㅁ
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>font속성</title>
    <link rel="stylesheet" href="../css/d_font.css" />
    <!-- web font link -->
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Gothic+A1&display=swap"
      rel="stylesheet">
  </head>
  <body>
    <h1 id="a">Audiowide Font</h1>
    <h1 id="b">Sofia Font</h1>
    <h1 id="c">Trirong Font</h1>

    <h1 class="ft">Lorem ipsum dolor sit amet</h1>
    <p class="ft">Audiowide Font</p>
    <p class="ft">Sofia Font</p>
    <p class="ft">Trirong Font</p>

    <div>
      <h1>The @font-face Rule</h1>
      내가 사용할 서체를 정의하여 사용할 수 있다.
    </div>

    <div id="ff">
      <h1>The @font-face Rule</h1>
      내가 사용할 서체를 정의하여 사용할 수 있다.
    </div>
  </body>
</html>​
/* d_font01.html 관련 CSS */
h1#a {  font-family: "Auiowide", sans-serif;}
h1#b {  font-family: "Sofia", sans-serif;}
h1#c {  font-family: "Trirong", serif;}
.ft {  font-family: Copperplate, Papyrus, fantasy;}
/* 서체 미지원시 차례대로 넘어감 */

/*컴퓨터에 있는 font사용시*/
@font-face {
    font-family: "Bebas Neue"; /*폰트명 선언하기*/
    src: url(../font/BebasNeue-Regular.ttf);
  }

/* div#ff {font-family: makeFont; font-weight: bolder;}
div#ff {font-family: "Anta";}
div#ff {font-family: "Nanum Myeongjo";} */

div#ff {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* div#ff {
  font-family: "Gothic A1", sans-serif;
  font-weight: 400;
  font-style: normal;
} */​
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)