Odpowiedzi:
Tak, możesz użyć funkcji CSS o nazwie @ font-face. Został oficjalnie zatwierdzony dopiero w CSS3, ale został zaproponowany i zaimplementowany w CSS2 i był obsługiwany w IE przez długi czas.
Deklarujesz to w CSS w ten sposób:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Następnie możesz po prostu odwołać się do niego tak, jak do innych standardowych czcionek:
h3 { font-family: Delicious, sans-serif; }W tym przypadku
<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>Wystarczy umieścić plik JUNEBUG.TFF w tej samej lokalizacji, co plik html.
Ściągnąłem czcionkę ze strony dafont.com :
urljest względna w stosunku do miejsca, w którym znajduje się plik CSS .
Aby zapewnić najlepszą możliwą obsługę przeglądarki, Twój kod CSS powinien wyglądać następująco:
@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;
}Aby uzyskać więcej informacji, zobacz artykuł Using @ font-face na CSS-tricks.com .
W większości nowoczesnych przeglądarek można używać @ font-face.
Oto kilka artykułów o tym, jak to działa:
Oto dobra składnia dodawania czcionki do aplikacji:
Oto kilka miejsc, w których można konwertować czcionki do użytku z @ font-face:
Również cufon będzie działał, jeśli nie chcesz używać font-face i ma dobrą dokumentację na stronie internetowej:
Spróbuj tego
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Jeśli używasz zewnętrznego arkusza stylów, kod może wyglądać mniej więcej tak:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }I powinien być zapisany w osobnym pliku .css (np. Styles.css). Jeśli plik .css znajduje się w miejscu innym niż kod strony, rzeczywisty plik czcionki powinien mieć tę samą ścieżkę, co plik .css, a NIE plik strony internetowej .html lub .php. Wtedy strona internetowa potrzebuje czegoś takiego:
<link rel="stylesheet" href="css/styles.css">w sekcji <head> Twojej strony html. W tym przykładzie plik czcionki powinien znajdować się w folderze css wraz z arkuszem stylów. Następnie po prostu dodaj class = "junebug" wewnątrz dowolnego tagu w swoim html, aby użyć czcionki Junebug w tym elemencie.
Jeśli umieszczasz css na właściwej stronie internetowej, dodaj tag style w nagłówku HTML, na przykład:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>A rzeczywisty styl elementu może być zawarty w powyższym <style>i wywoływany dla każdego elementu według klasy lub identyfikatora, albo możesz po prostu zadeklarować styl w linii z elementem. Przez element rozumiem <div>, <p>, <h1> lub jakikolwiek inny element w html, który musi używać czcionki Junebug. W przypadku obu tych opcji plik czcionki (Junebug.ttf) powinien znajdować się w tej samej ścieżce co strona html. Spośród tych dwóch opcji najlepsza praktyka wyglądałaby następująco:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>i
<h1 class="junebug">This is Junebug</h1>A najmniej akceptowalnym sposobem byłoby:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>i
<h1 style="font-family: Junebug;">This is Junebug</h1>Powodem, dla którego używanie stylów wbudowanych nie jest dobre, jest najlepsza praktyka mówi, że style powinny być przechowywane w jednym miejscu, więc edycja jest praktyczna. Jest to również główny powód, dla którego zalecam skorzystanie z pierwszej opcji korzystania z zewnętrznych arkuszy stylów. Mam nadzieję, że to pomoże.
jest na to prosty sposób: w pliku html dodaj:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Uwaga: wpisujesz nazwę posiadanego pliku .ttf. następnie przejdź do pliku css i dodaj:
h1 {
color: blue;
font-family: vermin vibes;
}Uwaga: umieszczasz nazwę rodziny czcionek, którą posiadasz.
Uwaga: nie wpisuj nazwy rodziny czcionek jako nazwy font.ttf Przykład: jeśli nazwa czcionki.ttf to: "vermin_vibes.ttf", twoja rodzina czcionek będzie miała postać: "vermin vibes" rodzina czcionek nie zawiera znaków specjalnych jako „-, _” ... itd. może zawierać tylko spacje.
font-faceCSS zamiast wymagać pliku ttf.