Gibt es eine Möglichkeit, fonts.com @font-face-Deklarationen zu reparieren?

https://stackoverflow.com/questions/5824925

26-10-2019
|

Frage

Viele beliebte Schriftarten scheinen für die Webkonsum ausschließlich aus verfügbar zu sein http://webfonts.fonts.com/

Es funktioniert jedoch sehr seltsam. Sie geben Ihnen nicht die direkten Schriftart -URLs, sondern geben Ihnen eine CSS -Datei, die sich auf die Schriftartdateien bezieht. Ich denke, die Schriftart -URLs in der CSS sind wahrscheinlich vorübergehend und ändern sich im Laufe der Zeit, um die unbefugte Verwendung zu verhindern. Sie müssen also ihre CSS verwenden, Sie können die URLs der Schriftartdatei nicht direkt integrieren (soweit ich weiß).

Das CSS wiederum ist nicht das, was ich denke, dass es sein sollte. Anstatt (vereinfacht):

@font-face { 
  font-family: "Foo";
  font-weight: bold;
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo";
  font-weight: normal;
  src: url("foo-normal-variant.ttf");
}

Es ist:

@font-face { 
  font-family: "Foo Bold";
  src: url("foo-bold-variant.ttf");
}

@font-face {
  font-family: "Foo Normal";
  src: url("foo-normal-variant.ttf");
}

Infolgedessen können Sie dies nicht tun:

body {
  font-family: "Foo", sans-serif;
}

Stattdessen, wohin Sie verwenden font-weight: bold, du musst es ändern font-family: "Foo Bold", und ich denke, Sie müssen CSS -Regeln hinzufügen, um die Familie auf Dinge wie wie <strong>. Ich benutze Bold als Beispiel, aber das gleiche Problem tritt auf font-style zusätzlich zu font-weight.

Sie erklären dies als Problemumgehung für einen iOS -Fehler ("Es ist eine Funktion!"): http://blog.fonts

Aber dieser Fehler wurde in iOS 4.2 behoben:http://blog.typekit.com/2010/12/06/updates-typekits-mobil-sopport/

Mit diesem Setup konnte ich, es sei denn, mir etwas fehlt, ich konnte keine CS oder Skripte von Drittanbietern verwenden, die versuchen zu verwenden font-weight, weil der Ansatz von FONTS.com das bricht font-weight und font-style CSS -Eigenschaften vollständig. Anstatt Schriftgewicht zu verwenden, müssen Sie eine benutzerdefinierte CSS-Klasse für "Mybold" oder ähnliches erstellen, um die Schriftfamilie auf "Foo BOLD" zu setzen. dh sie brechen Standard -CSS. (Was vermisse ich?)

Vielleicht reparieren sie das irgendwann. Aber in der Zwischenzeit, Kann jemand an eine vernünftige Problemumgehung denken? Es gibt keine Möglichkeit, die Familie "foo" in Bezug auf ihre "Foo Fett" usw. zu definieren. @font-face Definitionen gibt es? Schreiben Sie ein verrücktes JavaScript, um die URLs im laufenden Fliegen aus ihren CSS zu extrahieren und dann dynamisch mein eigenes @font-face zu definieren?

("Verwenden Sie eine andere Schriftart mit einem anderen Service" zählt nicht als Antwort ;-) Ja, ich habe darüber nachgedacht, aber ich frage mich, ob es eine Möglichkeit gibt, Webfonts.fonts.com zu "reparieren" Meine eigenen CSS -Regeln oder JavaScript.)

Lösung

Ich habe einen kleinen JavaScript-Loader für Fonts.com geschrieben, der mehrere Gewichte pro Schriftfamilie ermöglicht. Es basiert auf Rossis Ansatz, wird jedoch in ein wiederverwendbares Skript umgewandelt. Schauen Sie sich den Code und die Nutzung an in Dieser Kern.

Grundsätzlich lädt es das CSS von fonts.com, wird gemäß den angegebenen Einstellungen geändert und wird an die angehängt <head> Ihres Dokuments.

In deinem JS:

FontsComLoader.load('HelveticaNeueFontsCom', 'https://fast.fonts.net/cssapi/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.css', {
    'W02-55Roma': '400',
    'W02-75Bold': '700'
});

In Ihrem CSS:

.helvetica-regular,
.helvetica-bold {
    font-family: 'HelveticaNeueFontsCom', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.helvetica-regular {
    font-weight: 400;
}

.helvetica-bold {
    font-weight: 700;
}

Andere Tipps

Leider ist dies fast zwei Jahre später noch ein Problem, und Fonts.com hat keine unmittelbaren Pläne, die Art und Weise zu ändern, wie sie Schriftarten deklarieren (fragte sie auf Twitter).

Wenn Sie jedoch einen CSS -Compiler verwenden (z. Sass) Sie können dieses Problem mit verschachtelten Stilen ziemlich einfach lösen ... Der einzige Nachteil ist, dass es mehr Code ist als eine einfache Schriftgewichtserklärung zu verwenden.

Wenn Sie diesen Code hier werfen, falls jemand wie ich über diesen alten Thread stolpert!

h1 {
    font-family: "PMNCaeciliaW01-75Bold", Georgia, Times, serif;

    b, strong {
        font-family: "PMNCaeciliaW01-85Heavy", Georgia, Times, serif;
    }
    i, em {
        font-family: "PMNCaeciliaW01-76BoldIt", Georgia, Times, serif;
    }
    b i, strong i,
    i b, i strong
    b em, strong em,
    em b, em strong {
        font-family: "PMNCaeciliaW01-86HeavyI", Georgia, Times, serif;
    }
}

Es erzeugt nicht das schönste CSS der Welt, aber es funktioniert.

Update 2014/01/16: FONTS.com unterstützt jetzt Standard -Schriftarteinbettungen. Das Folgende funktioniert immer noch so, wie es sollte, wird aber größtenteils durch Unterstützung von Erstanbietern vermieden.

Beachten Sie zunächst, dass FONTS.com nun behauptet, dass Familiengruppierungen sind "in Arbeit". In der Zwischenzeit kann man jedoch tatsächlich normal tun @font-face Familie ist einbettet mit den Kits Fonts.com Supplies. [1

Nehmen wir an, dass die Schriftart erklären, die sie Ihnen geben, so etwas, wo ich ersetzt habe hash Für den Namen der Schriftart Datei jeweils: [2

@font-face{
    font-family:"Minion W01 It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion W01 Regular";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion W01 SmBd It";
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

Um dann eine Schriftfamilie mit einem schönen Namen zu erstellen, können Sie diese Erklärungen einfach wie folgt optimieren:

@font-face{
    font-family:"Minion";
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: normal;
    font-style: normal;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
    font-family:"Minion";
    font-weight: 700;
    font-style: italic;
    src:url("Fonts/hash.eot?#iefix");
    src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}

Das ist es; Es ist so einfach. Ich habe dies bereits auf einer meiner eigenen Websites getestet, und es funktioniert wie erwartet. Offensichtlich haben Sie für ältere Browser, die es nicht unterstützen, Probleme (Probleme, die Typkit auf andere Weise behandelt). Wenn Sie FONTS.com verwenden, sollte sich dies für Sie darum kümmern.

Fußnoten

Notiz: Dieser spezielle Ansatz funktioniert nur garantiert für die selbst gehostete Option, nicht Für die Version, die FONTS.com hostet. Ich vermute, es könnte für die Version funktionieren, die sie moderieren, aber ich habe es nicht getestet und plane in naher Zukunft nicht. Wenn jemand möchte und mich in einem Kommentar wissen lässt, werde ich die Antwort gerne aktualisieren, um dies widerzuspiegeln.
ich benutze hash Hier sehen die Dateinamen so aus, als würden sie generiert werden, indem der Original -Dateinamen über einen Hash -Generator ausgeführt wird. Da es sich um ein selbst gehostetes Kit handelt, werden sich diese Namen nicht ändern und dies wird daher weiter funktionieren. Vielen Dank an Kommentator Vieron zum hervorheben Dass dies geklärt war.

Ein Jahr verging, aber ich sehe immer noch nicht die gewünschte Funktionalität in Webfonts.fonts.com, daher habe ich die gleichen Probleme wie "Havoc P" gestoßen. Es sieht ziemlich frustrierend aus. Glücklicherweise werden auch Schriftarten, die ich benötigte, auch auf "webType.com" gehostet, mit deren Ansatz "standardmäßiger" Verknüpfung "Style -Verknüpfung" verwendet werden kann und auch mutige/kursive Familiennamen geben kann, wenn Sie möchten. Also bin ich gerade damit gegangen.

Ich habe Folgendes gemacht: (Die Mühe hat sich nicht die Mühe gemacht, den Code zu bereinigen, das könnte viel besser / universeller sein, aber ich werde ihn trotzdem veröffentlichen, Sie werden die Idee bekommen. Erhalten Sie die CSS -Last für die Cross -Domain, um damit zu arbeiten, und die $ .get Ajax -Last des CSS für andere Browser. Ich habe nicht unter 8 Uhr einchecken, aber ich denke, es funktioniert sogar dort. Es gibt einige Flimmern in Chrome unter Windows (Vista), aber ich denke, eine Kombination aus dieser und Google WebFont Loader würde den Trick machen.

<link rel="stylesheet" href="//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css" />
<script>
var data = "";
try
{
    data = document.styleSheets[document.styleSheets.length - 1].cssText;
    data = data.replace(/url\(/g, 'url(//fast.fonts.net');
    data = data.replace(/font-family: Geom Slab 703 W01 Light;/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family: GeomSlab703W01-LightIta;/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family: GeomSlab703W01-Medium;/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family: GeomSlab703W01-MediumIt;/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family: Geom Slab 703 W01 Bold;/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family: GeomSlab703W01-BoldItal;/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    document.styleSheets[document.styleSheets.length - 1].cssText = data;
}
catch (e)
{
}

$.get(location.protocol + '//fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', function(data) {
    data = data.replace(/url\("/g, 'url("//fast.fonts.net');
    data = data.replace(/import url\(/, 'import url(//fast.fonts.net');
    data = data.replace(/font-family:"Geom Slab 703 W01 Light";/g, 'font-family:"GeomSlab";font-weight:lighter;');
    data = data.replace(/font-family:"GeomSlab703W01-LightIta";/g, 'font-family:"GeomSlab";font-weight:lighter;font-style: italic;');
    data = data.replace(/font-family:"GeomSlab703W01-Medium";/g, 'font-family:"GeomSlab";font-weight:normal;');
    data = data.replace(/font-family:"GeomSlab703W01-MediumIt";/g, 'font-family:"GeomSlab";font-weight:normal;font-style: italic;');
    data = data.replace(/font-family:"Geom Slab 703 W01 Bold";/g, 'font-family:"GeomSlab";font-weight:bold;');
    data = data.replace(/font-family:"GeomSlab703W01-BoldItal";/g, 'font-family:"GeomSlab";font-weight:bold;font-style: italic;');
    var s = $('<style type="text/css" />').appendTo('head');
    s.html(data);
});
</script>

Ok, ich brauche nicht mehr als diesen schnellen Hack für mein aktuelles Projekt, aber wenn jemand eine aufgeräumte / optimierte Version codiert, würde ich mich freuen, darüber zu hören.

Fonts.com hat jetzt eine "Familiengruppierung"Option, dieses Problem zu lösen. Ich habe nicht gründlich untersucht, aber es sieht so aus, als wäre es um September 2013 veröffentlicht worden.

Obwohl mir klar ist, dass es etwas mehr Arbeit ist, gibt es eine alternative Methode, die das Endergebnis ermöglichen sollte, das Sie anstreben: Die Webfont Loader -API von Google (Mit unserem Service liefern Schriftarten).

Im Wesentlichen hat Google eine AJAX -API erstellt, die Sie mit unserem Service verwenden können. Zu den Vorteilen gehören die Möglichkeit, den Status von Schriftartlasten zu erkennen - die API stilft dynamisch das HTML -Tag der Seite mit verschiedenen Klassen, basierend darauf, ob eine Schriftart nicht laden (inaktiv), derzeit geladen wird (Laden) oder erfolgreich geladen (geladen) oder erfolgreich geladen (inaktiv). aktiv). Sie können dann einige clevere CSS -Regeln verwenden, um diese Klassen zu nutzen.

Weitere Informationen finden Sie auf unserer Blogeintrag und Googles Dokumentation.

Robertc gab die beste Antwort als Kommentar zur ursprünglichen Frage. FONTS.com verwendet die am meisten akzeptierte Version von @font-face (zu diesem Zeitpunkt), die die Schriftgewichtserklärung aufgrund des fleckigen Supports Cross-Browser nicht verwendet.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow