webentwicklung-frage-antwort-db.com.de

Wie kann ich die Roboto-Schriftart von Google auf einer Website verwenden?

Ich möchte die Roboto-Schriftart von Google auf meiner Website verwenden und folge diesem Tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Ich habe die Datei mit der folgenden Ordnerstruktur heruntergeladen:

enter image description here

Jetzt habe ich drei Fragen:

  1. Ich habe CSS in meiner media/css/main.css URL. Wo muss ich diesen Ordner ablegen?
  2. Muss ich alle eot, svg usw. aus allen Unterordnern extrahieren und in den Ordner fonts legen?
  3. Muss ich die CSS-Datei fonts.css erstellen und in meine Basisvorlagendatei aufnehmen?

Das Beispiel benutzt er dazu

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Wie sollte meine URL aussehen, wenn ich die dir-Struktur haben möchte:

/media/fonts/roboto

127
user26

Sie müssen das nicht wirklich tun.

  • Gehen Sie zur Google-Seite für Webfonts
  • suchen Sie im Suchfeld oben rechts nach Roboto
  • Wählen Sie die Varianten der Schriftart aus, die Sie verwenden möchten
  • klicken Sie oben auf "Diese Schriftart auswählen" und wählen Sie die gewünschten Strichstärken und Zeichensätze aus.

Auf der Seite finden Sie ein <link> -Element, das Sie in Ihre Seiten aufnehmen können, sowie eine Liste mit Beispielregeln für font-family, die Sie in Ihrem CSS verwenden können.

Die Verwendung der Google-Schriftarten auf diese Weise garantiert die Verfügbarkeit und reduziert die Bandbreite für Ihren eigenen Server.

216
user1864610

Es gibt ZWEI Ansätze , mit denen Sie lizenzierte Webschriften auf Ihren Seiten verwenden können:

  1. Font Hosting Services wie Typekit, Fonts.com, Fontdeck usw. bieten Designern eine einfache Oberfläche, um gekaufte Schriften zu verwalten und einen Link zu einer dynamischen CSS- oder JavaScript-Datei zu generieren, die das bereitstellt Schriftart. Google stellt diesen Dienst sogar kostenlos zur Verfügung ( hier ist ein Beispiel für die von Ihnen angeforderte Roboto-Schriftart). Typekit ist der einzige Dienst, der zusätzliche Hinweise zu Schriftarten bereitstellt, um sicherzustellen, dass Schriftarten in allen Browsern die gleichen Pixel belegen.

    JS-Font-Loader wie der von Google und Typekit (dh WebFont-Loader) bieten CSS-Klassen und Callbacks zur Verwaltung der FOUT, die möglicherweise auftreten , oder Antwortzeitlimits beim Herunterladen der Schriftart.

    <head>
      <!-- get the required files from 3rd party sources -->
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    
      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>
    
  2. Der DIY-Ansatz besteht darin, eine für die Webnutzung lizenzierte Schriftart zu erwerben und (optional) ein Tool wie den FontSquirrel-Generator (oder eine Software) zu verwenden, um die Dateigröße zu optimieren. Anschließend wird eine browserübergreifende Implementierung der Standard-CSS-Eigenschaft @font-face verwendet, um die Schrift (en) zu aktivieren.

    Dieser Ansatz bietet eine bessere Ladeleistung, da Sie die einzuschließenden Zeichen und damit die Dateigröße genauer steuern können.

    /* get the required local files */
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
    

Um es kurz zu machen:

Die Verwendung von Font-Hosting-Diensten zusammen mit der @ font-face-Deklaration bietet die beste Ausgabe in Bezug auf die Gesamtleistung, Kompatibilität und Verfügbarkeit.

Quelle: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/


UPDATE

Roboto: Googles Signatur-Schriftart ist jetzt Open Source

Sie können die Roboto-Schriftarten jetzt manuell mit Hilfe der folgenden Anweisungen generieren: hier .

55

Alte Post, ich weiß.

Dies ist auch mit CSS@import url möglich:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
14
rocksteady

Das src verweist direkt auf die Schriftartdateien. Wenn Sie also alle auf /media/fonts/roboto platzieren, sollten Sie in Ihrer main.css folgendermaßen darauf verweisen: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Der .. geht einen Ordner nach oben, was bedeutet, dass Sie auf den media -Ordner verweisen, wenn sich die Datei main.css im /media/css -Ordner befindet.

Sie müssen ../fonts/roboto/ in allen URL-Referenzen im CSS verwenden (und stellen Sie sicher, dass sich die Dateien in diesem Ordner und nicht in Unterverzeichnissen wie roboto_black_macroman befinden).

Grundsätzlich (Beantwortung Ihrer Fragen):

Ich habe CSS in meiner URL media/css/main.css. Wo muss ich diesen Ordner ablegen?

Sie können es dort lassen, aber achten Sie darauf, src: url('../fonts/roboto/ zu verwenden.

Muss ich alle EOT, SVG usw. aus allen Unterordnern extrahieren und in den Zeichensatzordner legen?

Wenn Sie direkt auf diese Dateien verweisen möchten (ohne die Unterverzeichnisse in Ihrem CSS-Code zu platzieren), dann ja.

Muss ich eine CSS-Datei fonts.css erstellen und in meine Basisvorlagendatei aufnehmen?

Nicht unbedingt, Sie können diesen Code einfach in Ihre main.css einfügen. Es empfiehlt sich jedoch, Zeichensätze von Ihrem benutzerdefinierten CSS zu trennen.

Hier ist ein Beispiel einer LESS/CSS-Datei für Schriftarten, die ich verwende:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(In diesem Beispiel verwende ich nur das ttf.) Dann verwende ich @import "fonts"; in meiner main.less-Datei. ( Weniger ist ein CSS-Präprozessor, das macht solche Dinge ein bisschen einfacher. )

4
Armfoot

Verwenden Sie / fonts / oder / font / vor dem Namen der Schriftart in Ihrem CSS-Stylesheet. Ich stehe vor diesem Fehler, aber danach funktioniert es einwandfrei.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
1
Mohammed Javed
For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

**then:**
html, body {
    font-family: 'Roboto', sans-serif;
}
1
Mr. Nobody

Versuche dies

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
0
Lead Developer

Haben Sie die How_To_Use_Webfonts.html gelesen, die in dieser Zip-Datei enthalten ist?

Nachdem Sie das gelesen haben, scheint es, dass in jedem Schriftarten-Unterordner bereits eine .css-Datei erstellt wurde, die Sie verwenden können, indem Sie Folgendes einfügen:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
0

es ist einfach

jeder Ordner, den Sie heruntergeladen haben, hat eine andere Art von Roboto-Schrift, dh, es handelt sich um unterschiedliche Schriftarten

beispiel: "roboto_regular_macroman"

um einen von ihnen zu benutzen:

1- Extrahieren Sie den Ordner der Schriftart, die Sie verwenden möchten

2- Laden Sie es in der Nähe der CSS-Datei hoch

3- Fügen Sie es jetzt in die CSS-Datei ein

beispiel für das Einbinden der Schriftart "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

achte auf den Pfad der Dateien, hier habe ich den Ordner "roboto_regular_macroman" in den gleichen Ordner hochgeladen, in dem sich die CSS befindet

dann können Sie die Schriftart einfach verwenden, indem Sie font-family: 'Roboto'; eingeben.

0
Omar Moustafa