Używasz niestandardowych czcionek za pomocą CSS?

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.

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!

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 .

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.

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;
  }

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,

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.

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');
}

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;
}