So verwenden Sie externe Schriftarten in CSS

Ich habe einen Ordner mit Svg und otf-Dateien heruntergeladen. Sie enthalten eine Schriftart, die ich in meinem HTML-Dokument verwenden möchte. Hier ist, was der Ordner wie folgt aussieht:So verwenden Sie externe Schriftarten in CSS

Erste Frage:

Welche der Dateien soll ich verwenden? Ich verstehe, dass "process.svg" und "process-yellow.svg" wahrscheinlich unterschiedliche Farben haben, ABER wenn wir eine "process-yellow.svg" und eine "process-yellow.otf" haben, welche sollte ich verwenden?

Zweite Frage:

Wie verwende ich die Schrift in meinem HTML-Dokument? Bisher habe ich versucht, dies:

Im html16.html Stil-Elemente:

<style type="text/css"> 
     @font-face { 
      font-family:'Process'; 
      src: url('/fonts/process.svg#process') format('svg'); 
     } 

     p.text1 { 
      width: 140px; 
      border: 1px solid black; 
      word-break: keep-all; 
      font-family: 'Process'; 
     } 
</style>

Im html16.html Körper-Elemente:

<body> 
    <b>word-break:keep-all</b> 
    <p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 

</body>

Aber es nicht tun etwas zur Schrift. Es sieht so aus, als würde es aussehen, ohne dass ich die Schriftart geändert habe.

EDIT: Es sollte hinzugefügt werden, dass das Importieren woff-Schriften für mich funktioniert, wie ich hier tat:

@font-face { 
    font-family:Process; 
    src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff); 
}

Quelle

2017-05-31 Sahand

Der erste Teil der Frage ist, wie Sie sagen, ein Dutzend Logos im PNG-Format heruntergeladen haben und fragen Sie, welchen Sie verwenden sollten - wie könnten wir das wissen? Schauen Sie sich die Seite an, von der Sie sie erhalten haben, und sehen Sie nach, ob Downloads Informationen oder Dokumentation enthalten. –

Tun Sie STRG + F5, um Ihren Browser zu aktualisieren. Wenn das nicht funktioniert, überprüfen Sie Ihre Quell-URL (wenn Sie Ihren Quellcode anzeigen, überprüfen Sie, ob die URL auf den richtigen Ort zeigt). –

Kein Erfolg damit, Stanley. Die URL ist korrekt. – Sahand

Wenn Webeinbettung zulässig ist. Sie können andere Schriftart-Dateien from here generieren, die für die älteren Browser funktioniert.

@font-face { 
    font-family: 'Process'; 
    src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */ 
    src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/fonts/process.woff') format('woff'), /* Modern Browsers */ 
     url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */ 
}

Quelle

2017-05-31 09:57:41

Ich bin nicht daran interessiert, meine eigene Schriftart zu erstellen. Ich möchte lernen, wie man Schriftarten importiert. – Sahand

Es ist kein Generator es ist Konverter. Sie müssen die aktuellen Svg- und Otf-Font-Dateien in ein anderes Format wie eot, woff, ttf konvertieren, um mit anderen Browsern zu arbeiten. –

Prost, Mann. Es funktionierte! – Sahand

Diese funktionieren sollte. Bitte überprüfen Sie mit der folgenden Syntax.

@font-face { 
    font-family: novalight; 
    src: url('/static/src/fonts/novalight.otf'); 
} 

.proximanovalight { 
    font-family : novalight, sans-serif; 
}

Quelle

2017-05-31 09:48:21 xxCodexx

Verwendete Ihre Syntax aber mit meinen eigenen Datei- und Fontnamen. Funktioniert nicht. – Sahand

Können Sie Code einfügen, den Sie ausprobiert haben? – xxCodexx

Try This - Import wie so,

@import url('https://fonts.googleapis.com/css?family=El+Messiri');

Dann nutzen:

font-family: 'El Messiri', sans-serif;

Quelle

2017-05-31 10:12:36 Leah

So verwenden Sie externe Schriftarten in CSS

Antwort

Verwandte Themen