HTML 사이트에 사용자 지정 글꼴을 설치하는 방법
저는 flash나 php를 사용하지 않고 있으며, 간단한 HTML 레이아웃에 커스텀 폰트를 추가해달라는 요청을 받았습니다."KG 준 버그"
로컬에서 다운로드했습니다. 이를 수행하기 위한 간단한 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만 넣으면 됩니다.html 파일과 동일한 위치에 TFF.
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/
글꼴을 사용하지 않으려면 큐폰도 사용할 수 있으며 웹 사이트에 좋은 설명서가 있습니다.
가능한 최상의 브라우저 지원을 위해 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 에서 @ymmetry-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
외부 스타일시트를 사용하는 경우 코드는 다음과 같습니다.
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
그리고 별도의 .css 파일(예: styles.css)에 저장해야 합니다..css 파일이 페이지 코드와 별도의 위치에 있다면 실제 글꼴 파일은 .html 또는 .php 웹 페이지 파일이 아닌 .css 파일과 동일한 경로를 가져야 합니다.그러면 웹 페이지에는 다음과 같은 것이 필요합니다.
<link rel="stylesheet" href="css/styles.css">
html 페이지의 <head> 섹션에서 확인할 수 있습니다.이 예에서 글꼴 파일은 스타일시트와 함께 css 폴더에 있어야 합니다.그런 다음 HTML의 태그 안에 class="junebug"를 추가하면 해당 요소에서 junebug 글꼴을 사용할 수 있습니다.
css를 실제 웹 페이지에 넣을 경우 html의 머리 부분에 스타일 태그를 추가하면 다음과 같습니다.
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
그리고 실제 요소 스타일은 위에 포함될 수 있습니다.<style>클래스 또는 id로 요소별로 호출하거나 요소에 따라 스타일을 선언할 수 있습니다.요소별로 보면 <div>, <p>, <h1> 또는 html 내에서 준버그 글꼴을 사용해야 하는 다른 요소를 의미합니다.이 두 옵션을 모두 사용하려면 글꼴 파일(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>
인라인 스타일을 사용하는 것이 좋지 않은 이유는 베스트 프랙티스에 따라 스타일을 모두 한 곳에 보관해야 편집이 가능합니다.이것은 제가 외부 스타일 시트를 사용하는 첫 번째 옵션을 사용하는 것을 추천하는 주요한 이유이기도 합니다.도움이 되었으면 좋겠습니다.
이를 위한 간단한 방법이 있습니다. html 파일에 다음을 추가합니다.
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
참고: 당신이 가지고 있는 .ttf 파일의 이름을 입력한 다음 css 파일로 이동하여 다음을 추가합니다.
h1 {
color: blue;
font-family: vermin vibes;
}
참고: 가지고 있는 글꼴의 글꼴 패밀리 이름을 입력합니다.
참고: font-family 이름을 font.ttf 이름 예로 쓰지 마십시오. font.ttf 이름이 "vermin_vibes.ttf"인 경우 font-family는 다음과 같습니다. "vermin vibes" font family는 "-,_"... 등의 특수 문자를 포함하지 않습니다.
언급URL : https://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site
'programing' 카테고리의 다른 글
| PowerShell 문자열 기본 매개 변수 값이 예상대로 작동하지 않음 (0) | 2023.09.08 |
|---|---|
| 데이터베이스 쿼리 선택 mariadb maxscale에서 자주 호출됨 (0) | 2023.09.08 |
| Data Jpa의 쿼리에 @Modifying 주석을 사용해야 하는 이유 (0) | 2023.09.08 |
| Renaming files using node.js (0) | 2023.09.08 |
| 자바스크립트 종속성 관리: npm vs. bower vs. volo (0) | 2023.09.08 |