Amatic SC Schriftart - Rendering 'ee'

Ich habe ein Problem mit der Amatic SC font, speziell beim Versuch, zwei 'e' Zeichen nebeneinander zwei zu rendern.Amatic SC Schriftart - Rendering 'ee'

Wie Sie auf der Google Fonts-Seite sehen können, sollte es so aussehen.

jedoch auf meiner Website erhalte ich diesen Effekt:

Es kann schwierig sein, zu sehen, aber die beiden ‚e‘ Zeichen haben zusammen als ein Zeichen verbunden worden. Wenn sie den Text hervorheben, fungieren sie als ein Zeichen.

Zusätzlich, wenn ich eine lange Zeichenkette wie 'eeeeeeee' ausdrucke und den Buchstabenabstand vergrößere, kann man das Problem deutlich sehen.

Ich kann nicht scheinen, keine Informationen über diese zu finden, so ist jede Hilfe sehr geschätzt, da es ziemlich ärgerlich ist!

Quelle

2017-05-30 user2397282

Große Schrift aber verwendet seit 2011 einige Probleme zu haben.Können Sie bitte eine Test-URL angeben (Fiddle, Codepen oder eine Staging-URL), damit wir das Problem reproduzieren können? –

https://jsfiddle.net/z8nfdzqh/1/ Sie können hier sehen, dass es ein Problem mit den Kleinbuchstaben e scheint. – user2397282

Ich kann diesen Fehler nicht reproduzieren, aber as per an older Stack Overflow answer, wurde dieses Problem (das ein typographisches Ligaturproblem ist) zuvor aufgrund eines Safari-Fehlers mit einigen Schriftarten erzeugt.

Versuchen Sie Ihr Stylesheet für die betroffenen Elemente hinzuzufügen:

-webkit-font-variant-ligatures: no-common-ligatures; 
    text-rendering: optimizeSpeed;

Sie können überprüfen, um zu sehen, ob das Problem noch vorhanden mit und ohne diese Eigenschaften in Ihrem Browser ist:

JSFiddle.

Wenn das Problem in keinem der Elemente vorhanden ist, könnte dies bedeuten, dass das Element auf Ihrer Website eine andere Eigenschaft aufweist, die dieses Problem verursacht.

DIE ANTWORT SO EDITED ICH KANN ALS LÖSUNG MARK

Ich bin nicht ganz sicher, warum dies funktioniert, aber das Hinzufügen der folgenden CSS zu den relevanten Tags festgelegt, dieses Problem:

-webkit-font-feature-settings: "liga" 0; 
font-feature-settings: "liga" 0;

Quelle

2017-06-02 22:04:56

Ja, es ist immer noch sichtbar für mich https://jsfiddle.net/6wu6exbq/3/. Siehst du nicht die Doppel-E hier? – user2397282

Nein, beide Beispiele haben keine gemeinsamen Ligaturen für mich, aber es ist gut, dass sie in diesem Beispiel für Sie sichtbar sind. Sind sie in beiden Textzeilen sichtbar, Rot und Grün? So oder so, es klingt wie ein Browser-Problem. Kannst du mir sagen, welchen Browser du benutzt? –

Yeah beide Zeilen ist es sichtbar. Ich verwende Chrome 58. – user2397282

kann ich nicht kommentieren, weil mein rep zu niedrig ist, jedoch habe ich versucht, das Problem ohne Erfolg zu replizieren:

JSFiddle

HTML

<p> 
Where's the beef?<br /> 
BEEEEEEEEEEEF 
</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Amatic+SC'); 
body { 
    font-family: 'Amatic SC'; 
    font-size: 40px; 
}

Ist es möglich, dass irgendwo Code läuft, der die E's zu einem Zeichen kombiniert? Wenn Sie uns in einem Codepen oder Geigen zeigen oder Schritte zur Reproduktion geben könnten, wäre das sehr hilfreich, um Ihr Problem zu lösen.

Quelle

2017-06-02 22:01:39

Ich habe Ihrem Code eine CSS-Zeile hinzugefügt, um den Buchstabenabstand zu ändern, und es scheint, als ob er mit den Kleinbuchstaben e funktioniert. https://jsfiddle.net/z8nfdzqh/1/ – user2397282

Ist es möglich, dass dies ein Problem mit Ihrem Browser ist? Hast du andere Browser und Browserversionen ausprobiert? Ich kann es nicht auf meinen Maschinen sehen. –

Es scheint nicht möglich, es auf Mobilgeräten mit Chrome und Safari zu sehen. Funktioniert nur auf meinem Mac, mit Chrome und Safari, aber nicht mit Firefox? – user2397282

Amatic SC Schriftart - Rendering 'ee'

Antwort

Verwandte Themen