Używasz niestandardowych czcionek za pomocą CSS?

175

Widziałem kilka nowych witryn internetowych, które używają niestandardowych czcionek w swoich witrynach (inne niż zwykłe Arial, Tahoma itp.).

I obsługują niezłą liczbę przeglądarek.

Jak to się robi? Jednocześnie uniemożliwiając ludziom swobodny dostęp do pobierania czcionki, jeśli to możliwe.

Radicate
źródło
zastąpienie javascript, takie jakcufon
tq

Odpowiedzi:

365

Ogólnie rzecz biorąc, możesz użyć niestandardowej czcionki, używając @font-facew swoim CSS. Oto bardzo podstawowy przykład:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Następnie, trywialnie, aby użyć czcionki na określonym elemencie:

.classname {
    font-family: 'YourFontName';
}

( .classnameto twój selektor).

Zwróć uwagę, że niektóre formaty czcionek nie działają we wszystkich przeglądarkach; możesz użyć generatora fontsquirrel.com , aby uniknąć zbytniego wysiłku przy konwersji.

Możesz znaleźć fajny zestaw bezpłatnych czcionek internetowych dostarczanych przez Google Fonts (ma również automatycznie generowane @font-facereguły CSS , więc nie musisz pisać własnych).

jednocześnie uniemożliwiając ludziom swobodny dostęp do pobierania czcionki, jeśli to możliwe

Nie, nie można stylizować tekstu za pomocą niestandardowej czcionki osadzonej za pośrednictwem CSS, jednocześnie uniemożliwiając ludziom jej pobieranie. Musisz użyć obrazów, Flash lub HTML5 Canvas , z których wszystkie nie są zbyt praktyczne.

Mam nadzieję, że pomogło!

Chris
źródło
Dziękuję za świetną szczegółową odpowiedź. Czy mogę zapytać, czy takie podejście działa również w starszych przeglądarkach? Takich jak .. IE8 / 7/6? A tak przy okazji, czy wszystkie czcionki wyświetlane w Google Webfonts są darmowe do użytku komercyjnego?
Radicate
1
@Don @font-facedziała ze wszystkimi rozsądnie nowymi przeglądarkami, ale musisz mieć odpowiednie formaty; dlatego zaleciłem użycie fontsquirrel.com do automatyzacji procesu konwersji i generowania reguł. I tak, Google Webfonts są darmowe do użytku komercyjnego ( mały link, aby uzyskać więcej informacji ).
Chris
@Chris, Czy pomijając font-style:oraz font-weight:w @font-facedeklaracji łamie żadnych norm?
Pacerier
1
Aby to zadziałało, musiałem dodać format('truetype')między źródłowym adresem URL a rozszerzeniem ;.
CalculatorFeline
Cześć Chris. Czy wiesz, jak używać tej czcionki? fontsmarket.com/font-download/gothic-821-condensed-bt
Billal Begueradj
30

Aby upewnić się, że czcionka jest kompatybilna z różnymi przeglądarkami, upewnij się, że używasz następującej składni:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Zaczerpnięte stąd .

Serj Sagan
źródło
25

Musisz pobrać plik czcionki i załadować go do swojego CSS.

Fe używam czcionki Yanone Kaffeesatz w mojej aplikacji internetowej.

Ładuję i używam go przez

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

w moim arkuszu stylów.

alexclooze
źródło
8

Obecnie w sieci są używane cztery formaty kontenerów czcionek: EOT, TTF, WOFF,iWOFF2.

Niestety, pomimo szerokiej gamy opcji, nie ma jednego uniwersalnego formatu, który działałby we wszystkich starych i nowych przeglądarkach:

  • EOT to tylko IE,
  • TTF ma częściową obsługę IE,
  • WOFF cieszy się najszerszą obsługą, ale nie jest dostępny w niektórych starszych przeglądarkach
  • Obsługa WOFF 2.0 jest w toku dla wielu przeglądarek.

Jeśli chcesz, aby Twoja aplikacja internetowa miała tę samą czcionkę we wszystkich przeglądarkach, możesz podać wszystkie 4 typy czcionek w CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
Hitesh Sahu
źródło
Cześć Hitesh. Czy mogę zapytać, jaki jest pożytek #iefix? i ta część font-family: 'besom'; !important, !importantjest na zewnątrz ;?
Jonjie
4

Jeśli nie znajdziesz żadnych czcionek, które lubisz na Google.com/webfonts lub fontsquirrel.com, zawsze możesz utworzyć własną czcionkę internetową, korzystając z utworzonej przez siebie czcionki.

oto fajny samouczek: Stwórz własny zestaw czcionek internetowych

Chociaż nie jestem pewien, czy uniemożliwić komuś pobranie Twojej czcionki.

Mam nadzieję że to pomoże,

Eric Robinson
źródło
4

istnieje również interesujące narzędzie o nazwie CUFON . Na tym blogu jest demonstracja, jak go używać. To naprawdę proste i interesujące. Ponadto nie pozwala ludziom ctrl + c / ctrl + v wygenerowanej treści.

sergioviniciuss
źródło
1

Pracuję na Win 8, użyj tego kodu. Działa dla IE, FF, Opera, itp. Zrozumiałem: czcionka woff jest lekka i powszechna w czcionkach Google.

Przejdź tutaj, aby wcześniej przekonwertować czcionkę ttf na woff.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
Arnold
źródło
0

Przede wszystkim nie możesz uniemożliwić ludziom pobierania czcionek, chyba że są one twoje, a to zwykle zajmuje miesiące. I nie ma sensu uniemożliwiać ludziom używania czcionek. Wiele czcionek, które widzisz na stronach internetowych, można znaleźć na bezpłatnych platformach, takich jak ta, o której wspomniałem poniżej.

Ale jeśli chcesz zaimplementować czcionkę w swojej witrynie, przeczytaj to: Istnieje dość prosty i darmowy sposób na wprowadzenie czcionek do Twojej witryny. Poleciłbym czcionki Google, ponieważ jest darmowy i łatwy w użyciu. Na przykład użyję czcionki Bangers z Google. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Tak by to wyglądało: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
NotTschuschl
źródło