Unten benutzerdefinierte schriftart abgeschnitten, bei Opera und webkit

Ich bin mit einem benutzerdefinierten schriftart in einer Seite, die ich entwickle, Droid Sans, und bei bestimmten Schrift Größen, der Boden ist abgeschnitten, aber nur in Opera und webkit-Browsern.

Es ist leicht zu reproduzieren auf der Google webfonts-Seite suchen, Droid Sans und zeigt, das ganze alphabet auf 18px: http://www.google.com/webfonts

Es ist besonders deutlich für die Kleinschreibung g.

Gibt es einige css-trick /hack kann ich verwenden, um erhöhen Sie die Zeilenhöhe /zeigen den ganzen Charakter oder bin ich wirklich nur bestimmte Größen der schriftart?

line-height und padding zum Beispiel ändern Sie nichts und 20px font-size funktioniert und im moment bin ich mit Windows 7.

Edit: übrigens, ich bin mir bewusst, eine ähnliche Frage hier aber wie die akzeptierte Antwort ist die änderung der Schriftgröße und den rest der Antworten nicht anwenden, es ist nicht viel Verwendung für mich.

Edit 2: Ein Beispiel , zumindest jetzt noch zeigt des Problems (linke Spalte, unter der Diashow Il Cerca Viaggi).

Edit 3: Das problem scheint zu sein, beschränkt sich auf Windows-obwohl ich bin mir nicht sicher, welche Versionen.

Edit 4: ich habe soeben einen screenshot von Google Webfonts, um zu zeigen, dass das problem nicht spezifisch für die Website, die ich entwickle.

Unten benutzerdefinierte schriftart abgeschnitten, bei Opera und webkit

Irgendeiner Weise, Sie können die Stile, die für diese schriftart? Ich freue mich auf die google web fonts, und Sie sind be-Ordnung in chrome und safari für mich.
Sieht gut aus in Chrome auf Vista. Vielleicht -webkit-font-smoothing hilft?
Danke, aber das scheint nicht, etwas zu tun mit irgendeinem der Werte in die Artikel. Zumindest auf meiner Seite...
Sieht gut aus auf OS X, in Opera und Webkit, also muss es ein Windows-spezifisches Problem.
Danke, ich habe die Seite geöffnet in Chrome auf Ubuntu und es ist gut, es ist ja ein windows-problem.

InformationsquelleAutor jeroen | 2011-12-20

  1. 11

    Es ist zwar nicht die Lösung, die ich Suche, habe ich eine mögliche Lösung gefunden, die funktionieren könnte für die anderen:

    In meinem original-style-sheet, die ich angegeben habe, die schriftart wie folgt:

    @font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
         url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

    Dadurch verursacht wird, dass webkit-Browser zu verwenden, der woff Datei /format.

    Ändern die Reihenfolge der schriftart-Spezifikationen und entfernen Sie das hash-tag nach der svg Spezifikation (warum ist das da überhaupt?), Ursachen webkit-Browser zu verwenden, der svg Datei /format:

    @font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.svg') format('svg'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    Dies löst das problem, alle Zeichen werden richtig angezeigt.

    Jedoch, zumindest in Windows 7 64bit, die svg Schrift ist nicht so scharf wie die woff Schrift ist irgendwie verschwommen, so dass ich nicht mit dieser Lösung und bin der Hoffnung, für eine bessere.

    Konnte Sie nur sagen, welche version von Opera? danke.
    dies funktioniert, und ja - Ihr verschwommen - wenn auch eine gute Lösung, bis wir ein besseres finden.
    Opera 11.60
    IIRC es ist genug zu tun, nur mit src: url(path/to/eot?), url(Pfad/zum/ttf);. Die Argumentation hinter sich, darunter die Schrift-in noch ein anderes format, SVG, und auch noch ein anderes format WOFF (was wahrscheinlich nur komprimiertes TTF), und alle diese unnötigen format-Deklarationen (die Dateinamen-Erweiterungen sind auch sinnlos, den Browser) ist mir schleierhaft.
    Es soll sicherstellen, dass alle Browser und Menschen stecken, die auf früheren Versionen können siehe die Schrift und wie Sie sehen können, ich kann nur alle Zeichen zur Anzeige auf webkit / Windows 7 mit der svg-Variante. Persönlich würde ich eher verwenden, Verdana, als all die Probleme, die Größenänderung und das blinken nicht wirklich mich davon überzeugen...

    InformationsquelleAutor

  2. 7

    Einer ähnliche Frage, eine Antwort vorgeschlagen, dass, während dies scheint eine Windows schriftart-rendering-Problem speziell, hosting svg, eot-und otf-Versionen von TrueType-Schriften (TTF) mit der schriftart, die war nicht für das web optimiert, hatte das problem behoben, der für seine Anbieter. Wenn möglich, bekommen Sie eine saubere, un-optimierte version der schriftart DroidSans und exportieren Sie die web-fonts selbst.

    EDIT: Sorry an alle, ich war für den Urlaub und habe keinen Zugang zu SO. Da bin ich nun wieder, ich habe getan, ein wenig Forschung in genau das, was verursacht dieses problem auf Windows-Rechnern...

    Es scheint, dass das Problem liegt und mit der Art, wie das OpenType-format ist die Darstellung auf Windows-Rechnern. Das Problem mit den Unterlängen abgeschnitten scheint, zu überwinden und software-Typ zu beeinflussen mehrere Windows-Programme, die versuchen zum Rendern von OpenType. Derzeit haben Sie die Embedded-OpenType-format (EOT) - version der Schrift zuerst angeführt, in Ihr CSS-Dokument unter @font-face. Da Chrome und Opera erkennen dieses format, werde Sie ignorieren die nachfolgende Quelle Erklärungen und verwenden Sie EOT zu der gewünschten schriftart. Leider, es scheint nicht zu einem schnellen Update, das Sie anwenden könnten, um eine OpenType-Schrift, sich selbst zu zwingen, die software zu Rendern, um ausreichende line-spacing für die niedrigsten seiner absteiger auf Windows-Rechnern...

    Jedoch, Sie können wählerisch sein über, die Schriftarten, die Sie füttern, um Ihre Zuschauer Browsern. Ich persönlich würde empfehlen, die SVG-version erste in der CSS, und für Browser, die das nicht erkennen dieses format, schlagen TrueType - (TTF -), das zweite, dann WOFF, dann EOT für Browser, die keine Unterstützung für irgendeine der oben genannten (einige ältere IE-Versionen erscheinen, um die Unterstützung von OpenType-exculsively). Wenn das SVG-rendering nicht viel für Ihren Geschmack, versuchen Sie TrueType ersten statt.

    Alternativ, ich bin zwar nicht mehr wirklich zuversichtlich, dass es helfen wird, können Sie eine TTF von DroidSans bei FontSquirrel und verwenden Sie ein software-Paket wie Typograf exportieren-web-fonts (EOT, WOFF, SVG). Versuchen Neuordnung der Quellen in der CSS wie oben beschrieben zuerst, obwohl.

    Noch ein EDIT: Meine fehlerhafte Verwendung von TIFF anstelle von TTF wurde berarbeitet, um Verwirrung zu vermeiden in der Zukunft. Entschuldigung für die Verwechslung, Jungs...

    Danke, es ist in der Tat beschränkt sich auf Windows. Aber ich möchte nicht wissen, wo Sie anfangen, eine nicht-optimierte version der schriftart und wandeln Sie in andere Formate. Ich wäre daran interessiert, es zu versuchen, obwohl, so dass, wenn Sie irgendwelche zusätzlichen Informationen, das wäre toll!
    Sorry für die verspätete Antwort @jeroen. Überprüfen Sie bearbeitet meine Antwort oben.
    Vielen Dank für die Ergänzung. Leider ist die svg Schrift macht meine Augen Wasser (siehe meine eigene Antwort). Wo sehen Sie eine tiff-download auf Font Squirrel?
    Oh Hoppla, ich dachte, es kam in dem ZIP-Paket mit den TTF. Lassen Sie mich zu halten suchen. In der Zwischenzeit haben Sie versucht, die Einstellung für die TrueType-version zuerst in deinem CSS?
    Ich habe, setzen die ttf ersten oder entfernen Sie es vollständig macht keinen Unterschied im Chrome zumindest.

    InformationsquelleAutor

  3. 2

    Ich bin nicht sicher, aber versuchen, das hinzufügen dieser für die Polsterung der Arbeit

    display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

    Legen Sie die Zeilenhöhe normal, es ist ein firefox-bug, und verwenden Sie die Zeilenhöhe in %
    Ich denke, das könnte den trick tun

    Danke, aber das ändert nichts, außer für die lay-out - (Ränder / padding). Ich glaube nicht, dass es ein Firefox-bug als Firefox ist die Anzeige der font korrekt in allen Größen.

    InformationsquelleAutor

  4. 1

    Es läuft alles auf die schriftart an sich.

    Schauen Sie hier

    http://jsfiddle.net/DdMej/2/

    Die erste Zeile verwendet Drod Sans von Google fonts.
    Die zweite Zeile verwendet die schriftart, die Sie auf Ihrer Website.

    Bearbeiten 1

    Screenshot

    http://imageshack.us/photo/my-images/811/screeniy.png/

    Unten benutzerdefinierte schriftart abgeschnitten, bei Opera und webkit

    Es gibt verschiedene css-Deklaration, Sie könnten @font-face font-family, font-size, font-stretch, font-style, font-variant, font-weight, unicode-range, units-per-em, src, ascent, bbox, cap-height, definition-src, descent, panose-1, slope, stemh, stemv, widths, x-height, baseline, centerline, mathline, topline. Vielleicht müssen Sie spielen, um mit diesen.
    Danke, aber in Chrome 16, sehe ich zwei Linien mit der gleichen schriftart, die beide mit dem unteren Fall g abgeschnitten am unteren Rand. Was sehen Sie?
    Ich sehe die ersten auf, mit einem etwas anderen Schnitt Droid Sans (den von Google), die ist nicht geschnitten auf der Unterseite in Google 16 und Opera und Safari
    Die schriftart, die ich verwende, kommt von Font Squirrel, aber wenn ich auf Google Webfonts selbst kann ich problemlos reproduzieren Sie das problem in Opera und Chrome auf 18px also ich glaube nicht, dass Google hat eine bessere version als Font Squirrel.
    Ich kann nicht reproduzieren in Google Wenfonts

    InformationsquelleAutor

  5. 0

    Wurde auch ich zu sehen, meine Google-Font "Lato" Schnitt am unteren Teil des wiedergegebenen text. In meinem Fall brauchte ich, um zu dienen Sie die schriftart-Dateien lokal anstelle der Verwendung von Google-Fonts. Um dies zu tun ich:

    • Konvertiert die gewünschte schriftart aus .ttf zu webfont-Dateien mit Font2Web
    • Dienten die font-Dateien, die lokal als statische Datei-assets aus dem localhost
    • Mitgelieferten Schriftarten in meiner css-Datei mit der bulletproof @font-face-Umsetzung

    Diese beseitigt meine abgeschnitten gerenderten text-Ausgabe.

    InformationsquelleAutor

Schreibe einen Kommentar