Benutzerdefinierte Schriftarten mit CSS verwenden?

Ich habe einige neue Websites gesehen, die auf ihren Websites benutzerdefinierte Schriftarten verwenden (außer den regulären Arial-, Tahoma- usw.).

Und sie unterstützen eine schöne Anzahl von Browsern.

Wie macht man das? Wenn möglich, wird auch verhindert, dass Personen freien Zugriff auf das Herunterladen der Schriftart haben.

Im Allgemeinen können Sie eine benutzerdefinierte Schriftart @font-facein Ihrem CSS verwenden. Hier ist ein sehr einfaches Beispiel:

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

Um die Schriftart dann trivial für ein bestimmtes Element zu verwenden:

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

( .classnameist dein Selektor).

Beachten Sie, dass bestimmte Schriftformate nicht in allen Browsern funktionieren. Sie können den Generator von fontsquirrel.com verwenden , um zu viel Aufwand beim Konvertieren zu vermeiden.

Sie finden eine Reihe kostenloser Web-Schriftarten, die von Google Fonts bereitgestellt werden (außerdem werden automatisch CSS- @font-faceRegeln generiert , sodass Sie keine eigenen schreiben müssen).

Gleichzeitig wird verhindert, dass Personen freien Zugriff auf das Herunterladen der Schriftart haben, wenn dies möglich ist

Nein, es ist nicht möglich, Ihren Text mit einer benutzerdefinierten Schriftart zu gestalten, die über CSS eingebettet ist, und gleichzeitig zu verhindern, dass Benutzer ihn herunterladen. Sie müssen Bilder, Flash oder den HTML5-Canvas verwenden , die alle nicht sehr praktisch sind.

Ich hoffe das hat geholfen!

Stellen Sie sicher, dass Sie diese Syntax verwenden, um sicherzustellen, dass Ihre Schriftart browserübergreifend kompatibel ist:

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

Von hier genommen .

Sie müssen die Schriftartdatei herunterladen und in Ihr CSS laden.

Zum Beispiel verwende ich die Yanone Kaffeesatz- Schriftart in meiner Webanwendung.

Ich lade und benutze es über

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

in meinem Stylesheet.

Heute werden im Web vier Schriftcontainerformate verwendet: EOT, TTF, WOFF,undWOFF2.

Leider gibt es trotz der großen Auswahl kein einziges universelles Format, das für alle alten und neuen Browser geeignet ist:

• EOT ist nur IE,
• TTF hat teilweise IE-Unterstützung,
• WOFF genießt die größte Unterstützung, ist jedoch in einigen älteren Browsern nicht verfügbar
• Die Unterstützung von WOFF 2.0 ist für viele Browser in Arbeit.

Wenn Sie möchten, dass Ihre Web-App in allen Browsern dieselbe Schriftart hat, möchten Sie möglicherweise alle 4 Schriftarten in CSS bereitstellen

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

Wenn Sie unter Google.com/webfonts oder fontsquirrel.com keine Schriftarten finden, die Ihnen gefallen, können Sie jederzeit eine eigene Webschrift mit einer von Ihnen erstellten Schrift erstellen.

Hier ist ein nettes Tutorial: Erstellen Sie Ihr eigenes Web-Font-Kit für Schriftarten

Obwohl ich nicht sicher bin, ob ich verhindern kann, dass jemand Ihre Schriftart herunterlädt.

Hoffe das hilft,

Es gibt auch ein interessantes Tool namens CUFON . In diesem Blog wird demonstriert, wie man es benutzt. Es ist wirklich einfach und interessant. Außerdem können Benutzer den generierten Inhalt nicht mit Strg + C / Strg + V drücken.

Ich arbeite an Win 8, benutze diesen Code. Es funktioniert für IE und FF, Opera usw. Was ich verstanden habe, ist: woff-Schrift ist leicht und bei Google-Schriftarten üblich.

Gehen Sie hier , um Ihre ttf-Schriftart zuvor in woff zu konvertieren.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Erstens können Sie nicht verhindern, dass Benutzer Schriftarten herunterladen, es sei denn, es gehört Ihnen und das dauert normalerweise Monate. Und es macht keinen Sinn, Menschen daran zu hindern, Schriftarten zu verwenden. Viele Schriftarten, die Sie auf Websites sehen, finden Sie auf kostenlosen Plattformen wie der unten genannten.

Wenn Sie jedoch eine Schriftart in Ihre Website implementieren möchten, lesen Sie Folgendes: Es gibt eine ziemlich einfache und kostenlose Möglichkeit, Schriftarten in Ihre Website zu implementieren. Ich würde Google-Schriftarten empfehlen, da diese kostenlos und einfach zu verwenden sind. Zum Beispiel verwende ich die Bangers-Schriftart von Google ( https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ). So würde es aussehen: HTML

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

CSS

body {
font-family: 'Bangers', cursive;
}