Wie kann sichergestellt werden, dass chinesischer Text auf der Webseite gerendert wird?


7

Ich mache eine Webseite, die teilweise auf Chinesisch ist. Ich verwende die UTF-8-Codierung für den gesamten Text. Die Seite enthält einige Teile in chinesischer Sprache, gemischt mit westlichen Buchstaben. Die Schriftart, die ich für westlichen Text verwende, enthält keine chinesischen Schriftzeichen. Daher möchte ich, dass die auf dem Computer des Benutzers verfügbare chinesische Schriftart zum Rendern der chinesischen Schriftzeichen verwendet wird (übrigens sind chinesische Schriftarten sehr groß und nicht zum direkten Herunterladen geeignet ).

Kann ich die chinesischen Schriftzeichen einfach in die Mitte des anderen Textes setzen und erwarten, dass der Browser eine chinesische Schriftart findet, in der sie gerendert werden können (wenn es mir egal ist, in welcher Schriftart sie gerendert wird), oder sollte ich die chinesische Schriftart angeben irgendwie?

Wie soll ich die Schriftart für den chinesischen Text angeben, um sicherzustellen, dass der Browser des Benutzers 你好 und nicht □□ anzeigt?


In meinem Browser (Firefox 56.0) macht das folgende Beispiel den chinesischen Text in beiden <span>s korrekt (natürlich vorausgesetzt, auf dem Computer ist eine chinesische Schriftart installiert) . Der gesamte chinesische Text wird in derselben Schriftart gerendert, sodass der Browser in gewisser Weise die Schriftart mit den im Text verwendeten Glyphen finden kann, obwohl ich den Namen einer Schriftart mit chinesischen Glyphen nicht angegeben habe ... habe keine Ahnung wie das funktioniert: |

<!doctype html>

<html lang="en-GB">

  <head>

    <meta charset="utf-8">

    <style>
      span.serif {
        font-family: "serif";
      }

      span.courier {
        font-family: "courier";
      }
    </style>

  </head>

  <body>
    <span class='serif'>123, wazzup? 一二三,你好嗎?</span><br />
    <span class='courier'>123, wazzup? 一二三,你好嗎?</span>
  </body>

</html>

Das Obige wird auf meinem Computer folgendermaßen gerendert:

Geben Sie hier die Bildbeschreibung ein


1
Ich fand den folgenden Artikel einen ziemlich interessanten (und möglicherweise hilfreichen) Artikel in Bezug auf die Verwendung von englischen und chinesischen Schriftarten. kendraschaefer.com/2012/06/… Ich bin überhaupt nicht mit der Website verbunden
Bronwyn V

"Kann ich die chinesischen Schriftzeichen einfach in die Mitte des anderen Textes setzen und erwarten, dass der Browser eine chinesische Schriftart findet, um sie zu rendern?" Haben Sie es versucht? Ich mache das gleiche mit thailändischer Schrift und es funktioniert. Einige Schriftarten haben sowohl Thai als auch Latein und sind möglicherweise für Chinesisch gleich.
Massimiliano Rubino

1
@MassimilianoRubino Ja, es funktioniert, aber ich würde gerne verstehen, warum, damit ich vorhersagen kann, in welchen Situationen es funktionieren wird und in welchen nicht. Übrigens mit einem Beispiel aktualisiert.
PetaspeedBeaver

Meine Idee ist nicht die beste, aber es kann funktionieren, wenn Ihre Gäste sich nicht für die Bandbreite interessieren. Fügen Sie den gesamten chinesischen Text in ein Bild ein und zeigen Sie dieses Bild auf Ihrer Seite anstelle von Text an.
Mike

1
@MassimilianoRubino Ist das wirklich so, dass die Schrift Glyphen für beide Sprachen haben muss, damit das funktioniert? Ich bin zweifelhaft, da ich mir ziemlich sicher bin, dass weder "Kurier" noch "Georgia" oder welche Schriftart auch immer als "Serife" verwendet wird, chinesische Glyphen enthält.
PetaspeedBeaver

Antworten:


3

Wenn die angegebene Schriftart keine Glyphe für ein Zeichen enthält, verwenden Browser normalerweise eine Fallback-Schriftart , um dieses Zeichen zu rendern.

(Browser nicht hat dies zu tun, natürlich, und wie es genau funktioniert vielleicht auch von dem Betriebssystem. Aber es wäre wirklich werden überraschend , wenn es Browser waren die Schriften verwenden Rückfall nicht. Ganz zu schweigen davon, dass es viele Benutzeragenten, die nicht einmal CSS unterstützen, z. B. Textbrowser, Feedreader usw.; für sie konnte man zunächst nicht einmal eine Schriftart angeben.)

Wenn keine geeignete Schriftart gefunden wird, wird für dieses Zeichen ein " Ersatzzeichen " (auch bekannt als "Tofu"; häufig, aber nicht unbedingt etwas wie "□") angezeigt.

Die von CSS definierten Algorithmen:

Wenn Sie also keinen Benutzeragenten kennen, der sich nicht darum kümmert, würde ich mir darüber keine Sorgen machen. Verwenden Sie im Idealfall immer das langAttribut (in diesem Zusammenhang kann es Browsern helfen, "sprachgerechte Schriftarten auszuwählen" als Fallbacks).

Wenn Sie sich für visuelle Harmonie interessieren, interessieren Sie sich möglicherweise für Schriftfamilien wie Noto oder Ubuntu . Sie versuchen, alle Sprachen / Skripte abzudecken und sie visuell kompatibel zu rendern (z. B. gleiche Höhe usw.).


0
  • Erstellen Sie einen Block für chinesischen Text mit den Attributen html, z. B. p oder em oder strong oder span oder ähnlichem. Wenden Sie das lang- Element an, um die Sprache des erstellten Blocks anzugeben. Info W3 zu ISO-Sprachcodes . In Ihrem Fall ist es lang = zh. Beachten Sie, dass Sie eine Teilmenge für die chinesische Sprache angeben können, z. B. für Chinesisch (vereinfacht) = zh-Hans , für Chinesisch (traditionell) = zh-Hant . Sie können auch das Land für Ihre chinesischen Wörter angeben / lokalisieren - info UN über Informationen zu Sprachgebieten . Zum Beispiel Chinesisch für Singapur lang = zh-SG.
  • Wenden Sie den HTML-Entitätscodierer / -decodierer für Ihre chinesischen Wörter an. Ihr erstes chinesisches Wort wird als codiert &#x4F60;&#x597D;&#x55CE;. Diese codierten Zeichen zeigen unabhängig von der Codierung jeden Browser an.

1
Interessante Punkte, aber Sie sprechen die Sache nicht mit Schriftarten an und warum mein Beispiel so gerendert wird, wie es ist (wobei chinesische Schriftzeichen korrekt wiedergegeben werden, obwohl ich die "falschen" Schriftarten ohne chinesische Schriftzeichen gesetzt habe ...) Wie wäre es damit :)
PetaspeedBeaver

Bitte geben Sie weitere Details.
Nikant25
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.