HTML 사이트에 사용자 정의 글꼴을 설치하는 방법
플래시 또는 PHP를 사용하지 않고 간단한 HTML 레이아웃에 사용자 정의 글꼴을 추가하라는 요청을 받았습니다. "KG June Bug"
로컬로 다운로드했습니다. 이것을 달성하는 간단한 CSS 트릭이 있습니까?
예, @ 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
대부분의 최신 브라우저에서 @ font-face를 사용할 수 있습니다.
작동 방식에 대한 기사는 다음과 같습니다.
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
앱에 글꼴을 추가하는 좋은 구문은 다음과 같습니다.
@ font-face와 함께 사용하기 위해 글꼴을 변환 할 수있는 몇 가지 위치는 다음과 같습니다.
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
또한 글꼴을 사용하지 않으려는 경우 cufon이 작동하며 웹 사이트에 좋은 문서가 있습니다.
최상의 브라우저 지원을 위해 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 에서 @ font-face 사용 기사 를 참조하십시오 .
이 시도
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
If you are using an external style sheet, the code could look something like this:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
If you're putting the css in the actual web page, add the style tag in the head of the html like:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
there is a simple way to do this: in the html file add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have. then go to to your css file and add:
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
Note: do not write the font-family name as your font.ttf name example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.
참고URL : https://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site
'Programing' 카테고리의 다른 글
| mysql 클라이언트 (Linux) 만 설치하는 방법이 있습니까? (0) | 2020.06.20 |
|---|---|
| PHP에서 Null vs. False vs. 0 (0) | 2020.06.20 |
| 왜 평가가 정확히 악한가? (0) | 2020.06.20 |
| Ruby 콘솔에서 고안 사용자 생성 (0) | 2020.06.20 |
| Numpy-배열에 행 추가 (0) | 2020.06.20 |