1. 홈
  2. 질의 응답
  3. HTML 사이트에 사용자 정의 글꼴을 설치하는 방법

HTML 사이트에 사용자 정의 글꼴을 설치하는 방법

2011-11-01 3 views

답변

208

예, @ font-face라는 CSS 기능을 사용할 수 있습니다. CSS3에서만 공식적으로 승인되었지만 CSS2에서 제안 및 구현되었으며 오랫동안 IE에서 지원되었습니다.

는이 같은 CSS의 선언 :

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

그런 다음 그냥 다른 표준 글꼴처럼 참조 할 수 있습니다 :

h3 { font-family: Delicious, sans-serif; }

그래서,이 경우,

<html> 
    <head> 
    <style> 
     @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
     h1 { 
     font-family: JuneBug 
     } 
    </style> 
    </head> 
    <body> 
     <h1>Hey, June</h1> 
    </body> 
</html>

그리고 JUNEBUG.TFF를 html 파일과 같은 위치에두기 만하면됩니다.

은 내가 dafont.com 웹 사이트에서 글꼴을 다운로드 :

http://www.dafont.com/junebug.font

출처

2011-11-01 02:03:02

+1

"숙제"라면이 JUNEBUG 글꼴을 평범한 텍스트로 사용하면 코드가 어떻게 생겼을까요? – adam

+0

답변을 업데이트했습니다. 그나저나 멋진 찾고 글꼴. –

+0

나는 그 일을 할 수 있는지 몰랐다. 다른 브라우저에서도 작동합니까? –

16

당신은 가장 현대적인 브라우저에서 @ font-face를 사용할 수 있습니다.

여기

어떻게 작동하는지에 대한 몇 가지 기사입니다 :

출처

2011-11-01 02:07:20 nheinrich

10

  • http://cufon.shoqolate.com/generate/
    • 3,, 당신의 CSS 코드는 다음과 같아야합니다 
    @font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

body { 
    font-family: 'MyWebFont', Fallback, sans-serif; 
}

    이 더 많은 정보 CSS-tricks.com에 기사 Using @font-face를 참조하십시오.HTML 파일의 추가에 : 

    <link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

    주

    출처

    2016-01-24 19:15:18

    4

    이

    @font-face { 
 
    src: url(fonts/Market_vilis.ttf) format("truetype"); 
 
} 
 
div.FontMarket { 
 
    font-family: Market Deco; 
 
}
    <div class="FontMarket">KhonKaen Market</div>

    vilis.org

    출처

    2016-09-18 07:59:54

    -1

    이 작업을 수행 할 수있는 간단한 방법이 시도 : 당신은 .ttf 파일의 이름을 넣으십시오. U는이. 는 다음 CSS 파일에 가서 추가

    h1 { 
    color: blue; 
    font-family: vermin vibes; 
}

    주 : 당신은 당신이 가지고있는 폰트의 폰트 패밀리의 이름을 넣어.

    참고 : font-family 이름을 font.ttf 이름으로 쓰지 마십시오. 예 : font.ttf 이름이 "vermin_vibes.ttf"인 경우 font-family가 다음과 같이 표시됩니다. "vermin vibes"font family doesn 특수 문자가 "-, _"... 등으로 포함되어 있지 않습니다. 공백 만 포함 할 수 있습니다.

    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

    을 그리고 별도의 .css 파일에 (예를 들어 styles.css가)를 저장해야합니다 : 외부 스타일 시트를 사용하는 경우

    출처

    2017-10-10 08:25:02

    +0

    실제로 ttf 파일을 요구하지 않고 CSS에서 'font-face'로 정의해야합니다. – Arcath

    +0

    그렇게하지 않아도됩니다. 이렇게하면 간단히 할 수 있습니다. 항상 두 가지 방법으로 작동합니다. 둘 다 작동합니다. –

    1

    , 코드는 다음과 같은 것을 볼 수 있었다. .css 파일이 페이지 코드와 별개의 위치에 있으면 실제 글꼴 파일은 .html 또는 .php 웹 페이지 파일이 아닌 .css 파일과 동일한 경로를 가져야합니다. HTML 페이지의 < 머리 > 섹션에서

    <link rel="stylesheet" href="css/styles.css">

    : 그런 다음 웹 페이지 같은 것을 필요로한다. 이 예제에서 글꼴 파일은 스타일 시트와 함께 css 폴더에 있어야합니다. 이 후 간단히 html의 모든 태그 안에 class = "junebug"를 추가하여 해당 요소에 Junebug 글꼴을 사용하십시오.

    <style> 
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

    을 그리고 실제 요소 스타일 중 하나 위의 <style>에 포함시킬 수 :

    당신이 실제 웹 페이지에서 CSS를 두는 경우

    , 같은 HTML의 머리 스타일 태그를 추가 클래스 또는 ID별로 요소별로 호출하거나 요소를 사용하여 스타일을 인라인으로 선언 할 수 있습니다. 요소에 의해 나는div >, <p>, <h1 > 또는 Junebug 글꼴을 사용해야하는 다른 요소를 의미합니다. 이 두 가지 옵션을 모두 사용하면 글꼴 파일 (Junebug.ttf)이 html 페이지와 동일한 경로에 있어야합니다.

    <style> 
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; } 
</style>

    및

    <h1 class="junebug">This is Junebug</h1>

    그리고 최소한의 수용 방법은 다음과 같습니다 :

    <style> 
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

    및

    <h1 style="font-family: Junebug;">This is Junebug</h1>

    이 두 가지 옵션 중 가장 좋은 방법은 같을 것이다 사용하기 좋지 않은 이유 인라인 스타일은 모범 사례이므로 스타일을 한 곳에서 모두 유지해야 편집이 실용적입니다. 이것은 또한 외부 스타일 시트를 사용하는 첫 번째 옵션을 사용하는 것이 가장 좋은 이유이기도합니다. 이게 도움이 되길 바란다.

    출처

    2017-12-27 23:56:30

    관련 문제

     관련 문제