it-swarm.com.de

Warum sieht mein Schriftarttext so fett aus?

Hier ist ein Bild aus dem Photoshop-Design der Webseite:

Photoshop render

Und die Webseite mit der gleichen Größe, Gewicht usw.:

Webpage render

Wie Sie sehen, wird der Text im Web-Rendering viel dicker, bis er fast wie eine völlig andere Schriftart aussieht.

Hier ist der @ font-face Code zum Text:

@font-face {
        font-family: "PT Sans";
        src: url('fonts/151428223-PTS55F.eot');
        src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
        url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
        url('fonts/151428223-PTS55F.woff') format('woff'),
        url('fonts/151428223-PTS55F.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

... und als Referenz die Einstellungen für den Text in Photoshop:

enter image description here

14
Ben

Wenn Sie die PT Sans-Schriftart in Photoshop verwenden, haben Sie sie bereits auf Ihrem PC installiert. Sie können versuchen, den @ -Schriftartencode zu entfernen und die installierte PT Sans-Schrift von Ihrem PC zu laden. Dabei handelt es sich um dieselbe Schriftartdatei, die Sie in Photoshop verwenden, um zu überprüfen, ob das Problem aufgrund des @ -Schriftartencodes oder auftritt Dateien im @ font-face-Format. (z. B. ohne @ font-face und ohne zusätzliche CSS)

<head>
<style>
    body {
        font-family: "PT Sans";
        font-weight: normal;
        font-style: normal;
        font-size: 28px;
        color: #454545;
        text-align: center;
    }
</style>
</head>
<body>
    <p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>

Sie können PT Sans auch über Google Fonts ausprobieren.

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

(Kopieren Sie den obigen Code als erstes Element in den <head> Ihres HTML-Dokuments.)

Was -webkit-font-smoothing angeht, denke ich, dass es keinen großen Unterschied macht, aber Sie können einen guten Artikel darüber lesen.

Beefing Up Dull Text im WebKit - von Chris Coyier.

Ich habe Photoshop CC (2014) und ich habe PT Sans von Google Fonts heruntergeladen und installiert und ich habe das Problem selbst mit dem obigen HTML-Code getestet. Dies sind die Ergebnisse:

1 - Ihr Bild und 2 - My Photoshop CC 2014 (Anti-Aliasing Smooth)

enter image description here

Wie Sie oben sehen können, wird Text in Photoshop in verschiedenen Browsern und mit Anti-Aliasing unterschiedlich gerendert. Wenn Sie dieselben Ergebnisse erzielen und die Schriftart für Sie fast völlig anders aussieht, lautet My Point:

Windows-, Linux-, OS X- und Mobile-Geräte verfügen (möglicherweise) über unterschiedliche Text-Rendering-Engines. Ganz zu schweigen davon, dass unterschiedliche Browser ihre eigenen Standardeinstellungen für die Textwiedergabe haben. Daher kann nicht garantiert werden, dass Ihre Schriftwiedergabe auf dem System des Benutzers wie vorgesehen angezeigt wird. - durch CSS-Tricks Text-Rendering

Übrigens sieht es für mich gut aus ... :)

Weitere Informationen :

Ein genauerer Blick auf Font Rendering - von Tim Ahrens

VIEL GLÜCK!

18
Anonymous

Haben Sie zuerst versucht, mit der Eigenschaft font-weight zu manipulieren? Es kann mehr als nur Werte für normal und bold enthalten. Sie können versuchen, die Einstellung auf 100, 200, ..., 900 zu setzen und festzustellen, ob sich die Schriftstärke ändert (ich denke, dies hängt von der verwendeten Schriftart ab).

Zweitens können Sie versuchen, dieser Schriftart eine der folgenden Optionen hinzuzufügen: -webkit-font-smoothing: none;, -webkit-font-smoothing: antialiased; oder -webkit-font-smoothing: subpixel-antialiased;.

14
Bodzio

Sie sollten separate @font-face-Deklarationen für die regulären und fett gedruckten Schriftschnitte haben, die Sie verwenden (im Beispiel oben ist nur einer aufgeführt), z.

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Regular.eot');
    src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Regular.woff') format('woff'),
         url('fonts/PTSans-Regular.ttf') format('truetype'),
         url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Bold.eot');
    src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Bold.woff') format('woff'),
         url('fonts/PTSans-Bold.ttf') format('truetype'),
         url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Darüber hinaus sollte das folgende CSS das Rendering verbessern:

.selector {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Hinweis: Der Standard-PT Sans ist nur in normalen und fett gedruckten Gewichten erhältlich.

5
Clint Brown

Chrome macht viele Schriftarten ziemlich fett. Wir haben leider auf das Herstellerpräfix zurückgegriffen, um Schriftarten aufzulösen, die nicht so gerendert werden wie in Designanwendungen. Dies ist in den meisten unserer Websites Standard: /

Wir verwenden einen Platzhalter, wenn wir die Problemumgehung (SCSS) schnell aktivieren/deaktivieren müssen:

%fix-fatty-fonts {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, button, input, select, textarea { @extend %fix-fatty-fonts;}

Ihre Schriftarten sehen in Chrome schrecklich aus - hier ist die Lösung ist ein aufschlussreicher Artikel zu diesem Problem.

3
Larry

Ich nehme an, Sie verwenden die Schriftart für ein Überschriften-Tag. Wenn ja, versuchen Sie, die Schriftstärke auf heller einzustellen:

h1 {
    font-family: "PT Sans";
    font-weight: lighter;
}
2
viarnes

Da es sich bei PT Sans um eine TTF-Schriftart handelt und die Lizenz Änderungen zulässt, können Sie die Darstellung kleinerer Dateien anpassen, indem Sie die Dateien mit http://www.freetype.org/ttfautohint/ (bei kleinen Größen bedeutet dies) verarbeiten Auf Bildschirmen mit hoher Pixeldichte hat dies kaum sichtbare Auswirkungen, da diese keine Hinweise benötigen, um die richtigen Schriftformen wiederzugeben.

Unterschiedliche Softwareplattformen werden unterschiedlich mit Zeichensätzen umgehen, bei denen es an Hinweisen mangelt, und fast kein Zeichensatz ist vollständig angedeutet. Durch Hinzufügen von Hinweisen zu den Schriftdateien können Sie ein bestimmtes Rendering erzwingen, wenn auf dem Bildschirm Pixel fehlen. In ttfautohint gibt es viele Optionen, um die Art des Renderings zu optimieren, die Sie bevorzugen (Sie können unter Linux dasselbe Ergebnis erzielen, ohne die Schriftarten zu ändern, da Die Rendering-Engine ist über fontconfig einstellbar.

Dies ersetzt natürlich möglicherweise den Hinweis, den die Schriftartendateien enthalten. Wenn sich der Zeichensatzersteller also die Mühe macht, einige Glyphenkombinationen mit cleveren manuellen Hinweisen anzupassen, werden die automatisierten Hinweise möglicherweise schlechter.

2
nim

oK, wenn dieses Problem in einem -webkit-basierten Browser auftritt. Anschließend können Sie diese Eigenschaften hinzufügen, um die Dicke zurückzusetzen.

-webkit-text-stroke: 0.25px;
2
naresh kumar

Anscheinend rendern Sie "PT Sans" in Ihrem Projekt. Normalerweise werden die meisten Schriftarten mit unterschiedlichen Schriftstärken geliefert. Sie können Zeichensätze aus Google-Zeichensätzen übernehmen, anstatt sie auf Ihrer Website zu rendern. Anschließend können Sie jede Schriftstärke verwenden, um sie an Ihre Anforderungen anzupassen, z. B. Fettdruck, Normaldruck oder Helldruck. Wenn Sie in Photoshop und im Web dasselbe Erscheinungsbild erzielen möchten, verwenden Sie diese CSS-Textwiedergabeeigenschaft.

.your-class {text-rendering: optimizeLegibility;}

Viel Glück :)

2
dazunE

Versuche Folgendes:

.YourTextClass {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

Wenn Sie den Text usw. animieren, können Sie dies natürlich in späteren Klassen außer Kraft setzen. Es können jedoch auch Probleme mit dem Z-Index auftreten. Denken Sie also daran, wenn Sie bemerken, dass Dinge verschwinden - alles, was Sie dann tun müssen ist z-index: 1 oder 2 oder was auch immer es sein mag, sequentiell gesprochen.

Hoffentlich hilft das!

1
Grant Briston

Wie haben Sie das Anti-Aliasing in PS eingestellt? Dies ist wahrscheinlich der Grund, warum es in PS anders aussieht als in einem Browser. Das Problem ist, dass jeder Browser den Text leider anders wiedergibt. Und Sie können Anti-Aliasing nicht einstellen. Dies könnte für Sie interessant sein: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

1
Sander
body {
  text-rendering: optimizeLegibility;
}
1
user3074446