웹 글꼴로 웹 페이지의 인상을 쉽게 바꾸다

5786 단어 HTML1분 시리즈webfontCSS
온라인상 지형이 꾸준히 주목받고 있지만'원래 그렇게 많은 글씨체가 없다'는 사람은 글씨체가 없어도 다양한 글씨체를 손쉽게 시도할 수 있다는 구글 폰트의 설명이다.
설치 자체는 1분이면 완료할 수 있습니다.꼭.

글꼴 찾기


Google Fonts에서 원하는 글꼴을 찾습니다.
또 일본어Noto Sans Japanese를 사용해 볼 수도 있다.

웹 페이지로 가져오기


가져오기는 매우 간단합니다.

CSS 읽기


샘플은 Google Fonts 페이지에도 기재되어 있으며 css에서 먼저 읽습니다.
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
이런 느낌.
Noto Sans Japanese의 경우는 조금 다릅니다.
<link href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" type='text/css'>
이런 느낌.

글꼴 지정


그런 다음 CSS에서 웹 글꼴을 적용할 섹션의 font-family를 지정합니다.
그래서 다 했어요.
.font1{
    font-family: 'Alegreya Sans', sans-serif;
}

견본


이것은 세 가지 글씨체를 읽은 후에 사용하는 견본이다.
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="copyright" content="">

    <!-- webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Gilda+Display' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" type='text/css'>

    <!-- CSS -->
    <style type="text/css">
        body{
            font-size:2em;
        }
        .font1{
            font-family: 'Alegreya Sans', sans-serif;
        }
        .font2{
            font-family: 'Gilda Display', serif;
        }
        .font3{
            font-family: 'Noto Sans Japanese', serif;
        }
    </style>

</head>
<body>
    <p class="font1">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>
    <p class="font2">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>
    <p class="font3">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>

</body>
</html>
이런 느낌
머리글 고정 테이블 가용성
c# autofac 및 WebApi 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage