Ich habe etwas über die Frage, ob Bilder für Text oder Google Schriftart

Question

Ich möchte eine Schriftart verwenden, die nicht beliebt ist. Diese Schriftart existiert in Google Fonts und auch in Photoshop. Ich bin verwirrt, weil beide Möglichkeiten etwas Ladezeit haben werden, ich weiß, dass Bilder nicht der gute Weg sind, um für Texte zu gehen (aber mindestens das Bild wird intern sein), jedoch wird Google-Schriftart einige Gemeinkosten einführen, weil die Schrift angefordert wird eine externe Quelle

die Methode gute Leistung (in Bezug auf Laufdrehzahl) hat:

1) Photoshop mit dem Text zu schreiben und es als Bild speichern als das Bild in meiner Webseite verwenden? oder

2) google font?

3) und wenn Sie google Schriftart verwenden. Muss ich die Font-Datei mit allen Formaten herunterladen und dann in meinen Website-Ordner legen? oder benutze ich einfach den html link tag um? welcher ist effizienter?

und vielen Dank im Voraus.

Answer 1

Google Fonts sind CDN, also nehmen sie Null Ihrer Serverressourcen auf (während Images dies tun). Allerdings können Google-Fonts Ihre Seite verlangsamen. Aber normalerweise nur, wenn Sie eine Handvoll Schriftarten verwenden. Ich würde überhaupt nicht mit 1 oder 2 beschäftigt sein. Insgesamt wäre jede Methode am Ende wenig bis gar nicht wichtig.

jedoch, Bilder für Text verwendet, ist ein Blitz zurück zu 1998 Bad Praxis. Mehr noch, wenn Sie Text aktualisieren, das Design ändern, A/B-Tests durchführen, die Barrierefreiheit nutzen, SEO betreiben und die Website im Allgemeinen pflegen, wird dies zu einem großen Problem für Sie. Einfachste Antwort? Vermeiden Sie es.

direkt von Google Fonts Website:

Tip: viele Schriftarten verwenden können Ihre Webseite verlangsamen, wählen Sie so nur die Schriftstile, die Sie tatsächlich auf Ihrer Webseite benötigen.

Tipp: Wenn Sie nur die Sprachen auswählen, die Sie benötigen, helfen Sie , die Langsamkeit auf Ihrer Webseite zu verhindern.

Beispiel Nutzung:

// include in the <head/> of your website 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

dann:

// in your css: 
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; } 

Erledigt. Sehr wenig Ressourcen.

Answer 2

Sie können google Schriftarten .ttf-Datei oder waverver Format, das Sie mögen oder unterstützt und rufen Sie diese Datei anstelle des Zugriffs von einer URL. Was viel viel schneller sein wird. Und ja Bilder sind wirklich schlecht, da es für die Suchmaschine unmöglich ist zu lesen.

Answer 3

Verwenden Sie Google-Schriftarten.

Das Google Fonts CDN wurde entwickelt, um Inhalte zu liefern, Inhalte, die daraus geladen werden, werden wahrscheinlich schneller geladen als auf Ihrem Server.

Sie müssen die Schriftart nicht herunterladen oder sich um die Browserunterstützung kümmern, sondern einfach das Tag <link> zu Ihrem HTML hinzufügen.

sollten Sie keine Bilder verwenden, um Text anzuzeigen, aus mehreren Gründen:

1. Screenreader nicht Text in einem Bild
2. Größe lesen kann. Abhängig von der Größe des Bildes und der Schrift kann das Bild größer als die Schriftdatei sein.
3. Ein großer Schmerz zu aktualisieren
4. UX Probleme. d. h. Benutzer können keinen Text kopieren, wählen usw.

Wann sollten Sie Bilder verwenden?

Wenn Sie einen Texteffekt benötigen, der nicht mit CSS, SVG oder Canvas erreicht werden kann (nicht so viele). Wie von @Stephen P in den Kommentaren notiert, sollten Sie noch Text hinzufügen, nur visually hide it with CSS