Einbetten von Schriftarten in die Homepage
https://stackoverflow.com/questions/1382886
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
gegoogelt Ive eine Menge versucht, Einbetten von Schriftarten auf einer Webseite, um herauszufinden, wie. Wie ich es verstehe, sollten Sie die Schriften auf Ihrer Webseite in .ttf und .eot Formate hochladen. und die Verwendung @ font-face in einem Stylesheet.
Ich habe die Kingthings_Italique.eot und Kingthings_Italique.ttf in der Wurzel meiner Webseite platziert.
Createt ein Stylesheet wie diese.
.MyStyle
{
/* For IE */
@font-face
{
font-family: 'Kingthings Italique';
src: url('Kingthings_Italique.eot');
}
/* For Other Browsers */
@font-face
{
font-family: 'Kingthings Italique';
src: local('Kingthings Italique Regular'),
local('KingthingsItalique-Regular'),
url('Kingthings_Italique.ttf') format('truetype');
}
}
Zunächst verweise ich auf es wie folgt
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Und ich versuche es so zu verwenden,
<asp:Label ID="lbl" runat="server" Font-Bold="True"
Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>
Aber egal, ob ich verwende IE8 oder chrome2 die Schriftart ist nicht verändert.
Wenn ich verstehe, http://randsco.com/?p=680&more=1&c=1 korrigieren sollte es möglich sein
Wenn ich die Quelle in IE8 öffnen soll ich dann in der Lage sein, den Namen der Schriftart zu sehen? denn wenn ich für König durch den IE8 Code suchen finde ich nichts
Lösung
Damit die eingebettete Schriftart Funktion verwendet (in Browsern unterstützt es) Sie haben auch die neue Schriftart-Familie zu einem Stilauswahl anwenden bekam.
Zum Beispiel
h1 {
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
}
wird der Trick nicht, obwohl es in der Tat eine Schriftart geladen wird (wenn es sich um eine gültige URL ist) -, weil alles, was wir getan haben die Schriftart ist zu laden. Wir brauchen noch es tatsächlich gelten, so
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
h1 {
font-family: CustomFont;
}
beide lädt die benutzerdefinierte Schriftart und wendet sie auf Ihrem CSS-Selektor (in diesem Beispiel h1).
Sie werden fast wollen sicherlich ein Tutorial über @ font-face zu lesen (Krule hat bereits ein gutes vorgeschlagen oben mit Links zu kostenlosen Fonts, die mit ihr verwendet werden kann.) Das Gleiche gilt für alle anderen Warnungen über etwa anmutigen Degeneration, da dies noch nicht eine universell unterstützte Funktion.
Andere Tipps
Das ist nicht wirklich etwas, können Sie, oder tun sollten. Die Mehrheit der Web hat auf einigen grundlegenden Schriften gesetzt (serif, sans-serif etc) und es liegt dann an den Browser zu entscheiden. Sie können mehrere Schriftarten angeben und den Browser zu degradieren, wenn sie nicht vorhanden ist:
font-family: Kingthings Italique, sans-serif
Dies ist wahrscheinlich die beste Strategie, wenn die Menschen die Schrift haben wird angezeigt es, sonst wird es eine generische Schrift werden.
Obwohl die Verwendung von @ font-face ist noch nicht wegen des Mangels an eine breite Unterstützung empfohlen, gibt es eine Möglichkeit, um die Verwendung benutzerdefinierte Schriftarten in modernen Browsern (die meisten von ihnen). Doch vergessen Sie nicht, Backup-Lösung für Graceful Degradation in älteren Browsern zur Verfügung zu stellen.
Wie auch immer, sollten Sie überprüfen, dieses Tutorial für weitere Details.
AFAIK, Schriftart mit reinen CSS Einbettung ist nicht wirklich von den meisten Browsern unterstützt (noch) nicht.
Andere Lösungen existieren, though. Wenn Sie nicht mit Hilfe von JavaScript dagegen Besuche cufon , die SVG / VML verwendet was auch immer Schriftart in den meisten Web-Browsern verwendet heute (auch IE6).
zu machenSchriftarten einbetten CSS ist nicht zur Arbeit in der modernen Web-Browser soll. Genauer gesagt, Schrift Teil von CSS2 Einbettung mit CSS und wurde von einigen Browsern unterstützt, aber in CSS2.1 (und eigentlich auch entfernt von der CSS2 aktuellen Spezifikation).
zurückgezogenein Comeback von Font-Unterstützung mit CSS3 erwarten, wenn Browser unterstützt, dass starten. Firefox 3.5, Opera 10 und Safari erwarten CSS3 Stil font-Einbettung mit TTF-Schriften, Chrome verfügen nicht über Safari Unterstützung für CSS3 Schriftarten einbetten aus irgendeinem Grunde zu unterstützen.
Ihr Problem Ihre Schrift auf IE8 in Rendering kann der Tatsache zusammenhängen, dass die zweite font-face Erklärung die gleiche font-family als erstes definiert - und damit außer Kraft gesetzt - aber auch keine Aussage keine EOT-Fonts, dass der IE verwenden können .
Ich schlage vor, Sie verwenden eine einzige font-face Definition wie;
@font-face
{
font-family: 'Kingthings Italique';
src: local('Kingthings Italique Regular'),
local('KingthingsItalique-Regular'),
url('Kingthings_Italique.eot'),
url('Kingthings_Italique.ttf') format('truetype');
}
Dann kann IE zunächst versuchen, das EOT-Fonts zu verwenden. Andere Browser (aber nicht Chrome scheinbar) wird versuchen, die eot zu verwenden, dann fallen zu ttf-Rendering zurück. Dies setzt natürlich voraus, dass der IE die „alternative Quellen“ Definition behandeln, die ich bin nicht sicher, es tut - die @ font-face-Dokumentation in MSDN keinen Verweis auf das macht.
Zunächst einmal versuchen, absolute Pfade zu verwenden:
url('/Kingthings_Italique.ttf')
<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
Ich denke, Sie sollten nur eine @ font-face-Deklaration mit vielen Quellen für eine font-Familie. Es sieht also nicht Ihre Erklärung mag. Der Code von oben genanntem Artikel ( http://randsco.com/index.php/ 2009/07/04 / cross_browser_font_embedding ):
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName {
font-family:" your FontName ", verdana, helvetica, sans-serif;
}
Die erste Quelle für EOT-Datei sein sollte. Die zweite Quelle soll mit lokalem Schriftnamen für TTF-Datei und startet sein. Es ist eine Art von Hack. Die zweite Quelle Attribut sieht ungültig für IE so dass dieser Browser die ersten verwenden. Für andere Browser beide gültig sind, jedoch nur die letzte verwendet wird.
Für TTF-Dateien EOT I Umwandlung verwendet, um dieses kleine Programm: http://code.google.com/p/ttf2eot/
Das Verfahren sollte von folgenden Browsern unterstützt werden:
- Firefox 3.6 +
- Internet Explorer 4 +
- Opera 10.00 +
- Chrome 4.0 +
- Safari 3.1 +
Ich habe einige Tests gemacht und es hat für mich gearbeitet. Das Chrome 2 ist wahrscheinlich zu alt.
Sie werden auf Blöcke müssen eingebettete Schriften in IE und Nicht-IE-Browser unterstützen.
Der IE Block muss an zweiter Stelle kommen und in einem IE Selektor Kommentar enthalten sein.
Zum Beispiel:
<style type="text/css">
@font-face
{
font-family: 'myFont';
src: url('/location/of/myFont.ttf');
}
</style>
Dies wird für alle modernen Browsern außer IE arbeiten (Firefox, Safari, Chrome, etc ...) Jetzt IE erhalten Sie zu verhalten folgendes benötigen:
<!--[if IE]>
<style type="text/css">
@font-face
{
font-family: 'myFont';
src: url('/location/of/myFont.eot');
}
</style>
<![endif]-->
Der Kommentar if-Anweisung nur von IE seit IE 5 und gelesen wird. Dies ist ideal für das Geben IE besondere Anweisungen. Zu den anderen Browsern einige es nur kommentiert aus Text, der gerendert nicht erhalten.
Wenn Sie nicht über ein .eot Format Ihrer Ttf Schriftart haben, dann können Sie auf der folgenden URL gehen http://www.kirsle.net/wizards/ttf2eot.cgi Es ist wirklich einfach zu bedienen und erzeugt die .eot Schriftart für Sie in Sekunden.
1, wenn Sie meine Antwort mögen. Kommentar, wenn Sie denken, ich brauche etwas zu verbessern:)
Ich erkennen diese Frage ist ziemlich alt, aber es ist jetzt ein großer Schrift-API von Google, dass man <link> zu können: https://developers.google.com/webfonts/
