최신 웹 개발 튜토리얼
 

W3.CSS글꼴


W3.CSS 글꼴

웹이 아름다운 만들기!

W3.CSS으로 웹 페이지에 새로운 글꼴을 추가하기가 매우 쉽습니다.

  • (단지 CSS와 HTML)를 사용하여 아주 쉽게
  • 외부 글꼴 라이브러리를 무제한 사용 (구글 글꼴처럼)
  • 모든 현대적인 브라우저에서 작동

글꼴 클래스를 사용하여

웹을 만들기!

웹 페이지의 머리에서 (또는 스타일 시트), 글꼴 클래스를 만들 :

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

웹 페이지의 본문에서, 클래스 이름을 사용

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
»그에게 자신을보십시오

외부 글꼴을 사용하여

웹 페이지의 머리에서 외부 글꼴을 포함하고 글꼴을하는 클래스를 제공합니다 :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

웹 페이지의 본문에서, 클래스 이름을 사용

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
»그에게 자신을보십시오

더 예

웹을 만들기!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
»그에게 자신을보십시오
웹을 만들기!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
»그에게 자신을보십시오
웹을 만들기!

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
»그에게 자신을보십시오
노트 글꼴 효과는 인터넷 익스플로러 9 이전 버전에서 작동하지 않습니다.

페이지 글꼴 변경

당신이 w3.css를로드 한 후 웹 페이지의 머리에서 (또는 스타일 시트), HTML과 신체의 스타일을 변경 :

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<style>
html , body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
»그에게 자신을보십시오