Jak zainstalować niestandardową czcionkę w witrynie HTML

153

Nie używam Flasha ani PHP - i zostałem poproszony o dodanie niestandardowej czcionki do prostego układu HTML. „KG June Bug”

Mam to pobrane lokalnie - czy istnieje prosta sztuczka CSS, aby to osiągnąć?

html css fonts webfonts Adam
źródło

276

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 :

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

Nicolas Modrzyk
źródło

1

przepraszam, jeśli to „zadanie domowe”, jak wyglądałby kod, gdybym użył tej czcionki JUNEBUG tylko do zwykłego tekstu

adam

Nie wiedziałem, że możesz to zrobić. Czy działa też w innych przeglądarkach?

Julien Bourdon

1

Działa w każdej przyzwoitej przeglądarce: webfonts.info/wiki/index.php?title=@font-face_browser_support

Nicolas Modrzyk

Nie działa dla mnie, moja czcionka znajduje się w tym samym folderze co moja strona php.

Czarny

1

@ Czarna ścieżka określona w urljest względna w stosunku do miejsca, w którym znajduje się plik CSS .

Alex Semeniuk

17

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 .

John Slegers
źródło

17

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:

http://www.fontspring.com/blog/f Further-hardening-of-the-bulletproof-syntax

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:

http://cufon.shoqolate.com/generate/

nheinrich
źródło

9

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>

Rozwiń fragment

vilis.org

SIAMWEBSITE
źródło

4

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.

Richard Stitz
źródło

-1

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.

Abbass Sharara
źródło

Naprawdę powinieneś zdefiniować go jako plik font-faceCSS zamiast wymagać pliku ttf.

Arcath

nie jest to wymagane, więc możesz to po prostu zrobić w ten sposób. Zawsze robię to na dwa sposoby i oba działają

Abbass Sharara

@Arcath dlaczego lepiej jest używać font-face?

Antonio Araujo

Jak zainstalować niestandardową czcionkę w witrynie HTML

Odpowiedzi: