답변:
예, @ 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 웹 사이트 에서 글꼴을 다운로드했습니다 .
url는 CSS 파일의 위치와 관련이 있습니다.
최상의 브라우저 지원을 위해 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를 사용할 수 있습니다.
작동 방식에 대한 기사는 다음과 같습니다.
앱에 글꼴을 추가하는 좋은 구문은 다음과 같습니다.
@ font-face와 함께 사용하기 위해 글꼴을 변환 할 수있는 위치는 다음과 같습니다.
또한 글꼴을 사용하지 않으려는 경우 cufon이 작동하며 웹 사이트에 좋은 문서가 있습니다.
이 시도
@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> 또는 Junebug 글꼴을 사용해야하는 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.ttf 이름으로 글꼴 모음 이름을 쓰지 마십시오. 예 : font.ttf 이름이 "vermin_vibes.ttf"인 경우 글꼴 모음은 "vermin vibes"입니다. 글꼴 모음에 특수 문자가 포함되어 있지 않습니다 "-, _"... etc와 같이 공백 만 포함 할 수 있습니다.
font-facettf 파일을 요구하지 않고 CSS 로 정의해야 합니다.