it-swarm.com.de

Schriftarten sehen in Firefox und Chrome anders aus

Ich verwende Google Web Fonts PT-sans

font-family: 'PT Sans',Arial,serif;

in Chrome und Firefox sieht es jedoch anders aus 

Gibt es etwas, das ich hinzufügen muss, damit es in allen Browsern gleich aussieht?

36
Tushar Ahirrao

cSS Reset kann das Problem beheben, ich bin mir nicht sicher.

http://developer.yahoo.com/yui/reset/

4
Vamsi Krishna B

Für die ChunkFive-Schriftart von FontSquirrel geben Sie "font-weight: normal;" Das Rendering von Firefox wurde in einer Kopfzeile als Arsch angesehen. Sieht aus, als hätte Firefox versucht, eine falsche Schrift auf eine Schrift anzuwenden, die nur ein Gewicht hat, während Chrome dies nicht tat.

22
Sergiy

Für mich sehen Chrome-Web-Fonts schäbig aus, bis ich die SVG-Schriftart vor WOFF und TrueType gesetzt habe. Zum Beispiel:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Selbst dann sehen Chrome-Schriften dünner aus als in Firefox oder IE. Chrome sieht an dieser Stelle gut aus, aber ich möchte normalerweise verschiedene Schriftarten in IE und Firefox einstellen. Ich verwende eine Kombination aus IE bedingten Kommentaren und jQuery, um je nach Browser unterschiedliche Schriftarten festzulegen. Für Firefox habe ich beim Laden der Seite folgende Funktion ausgeführt:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

Dann kann ich in meinem CSS sagen

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

Ebenso kann ich in einem IE-only-Stylesheet, das in IE bedingten Kommentaren enthalten ist, Folgendes sagen:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
11
Sarah Vessels

Es gibt ein paar Korrekturen. Normalerweise kann es jedoch behoben werden mit:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Manchmal kann es an font-weight liegen. Wenn Sie eine benutzerdefinierte Schriftart mit @font-face verwenden, stellen Sie sicher, dass Ihre font-weight-Syntax korrekt ist. In @font-face besteht die Idee der font-weight/font-style-Eigenschaften darin, Ihren font-family-Namen über verschiedene @font-face-Deklarationen hinweg zu halten, während andere font-weight- oder font-style-Werte verwendet werden, damit diese Werte ordnungsgemäß in CSS funktionieren (und Ihre benutzerdefinierte Schriftart laden, nicht "fake fett").

Ich habe gesehen, wie -webkit-text-stroke: 0.2px; erwähnt wurde, um Webkit-Schriftarten zu verdicken, aber ich denke, Sie werden dies wahrscheinlich nicht brauchen, wenn Sie den ersten Code verwenden, den ich gegeben habe.

6
Ryan Taylor

Vermeiden Sie die Verwendung von CSS-Formatvorlagen, um das Aussehen der Schriftart zu ändern, um Abweichungen der Schriftarten in allen Browsern zu vermeiden. Die Verwendung der Eigenschaft font-size ist normalerweise sicher, aber Sie möchten vielleicht Dinge wie font-weight vermeiden: fett; Stattdessen sollten Sie die fette Version der Schriftart herunterladen und einen anderen Namen für die Schriftfamilie angeben.

5
Dave

Ich habe festgestellt, dass Chrome dazu neigt, Schriften etwas schärfer und Firefox ein wenig glatter zu gestalten ... Es gibt nichts, was Sie dagegen tun können. Viel Glück

4
andrewk

Seit 2014 gibt es in Chrome noch einen Fehler, bei dem, wenn auf dem verwendeten Webfont eine lokale Kopie installiert ist, die lokale Version verwendet wird, was zu Problemen bei der Darstellung von OPs führt. 

Um dies zu beheben, können Sie Folgendes tun:

Zuerst sollten Sie Chrome Browser oder OSX als Ziel verwenden (für mich lag das Problem nur bei OSX Chrome). Ich habe dieses einfache JS verwendet, um eine schnelle Browser-/OS-Erkennung zu erhalten. Sie können dies auf jede andere Weise tun, als Sie es gewohnt sind:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Da Sie nun einen Browser/OS als Ziel festlegen können, erstellen Sie die folgende "neue" Schriftart:

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

Die Schriftarten-URL ist die gleiche, die Ihr Browser beim Einbetten von Google WebFont verwendet. Wenn Sie eine andere Schriftart verwenden, kopieren Sie die URL und ändern Sie sie entsprechend. 

Die URL erhalten Sie hier http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

Sie können den @ font-face-Alias ​​für benutzerdefinierte Schriftfamilien auch umbenennen.

Erstellen Sie eine einfache CSS-Regel, um diese Schriftart für Browser/OS oder beide zu verwenden:

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Oder 

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Erledigt. Wenden Sie einfach die Schriftfamilienregel an, wo immer Sie möchten.

3
Antonio Max

Verschiedene Browser (und FWIW, verschiedene Betriebssysteme) verwenden unterschiedliche Engine für das Rendern von Schriften, und ihre Ergebnisse sollen nicht identisch sein. Wie bereits erwähnt, können Sie nichts dagegen tun (es sei denn, Sie können Text durch Bilder oder Flash ersetzen oder Ihren eigenen Renderer mithilfe von Javascript + Canvas implementieren. Letzteres ist etwas übertrieben, wenn Sie mich fragen).

2
CAFxX

ich fand das großartig: 

-webkit-text-stroke: 0.7px;

oder

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

experimentieren Sie mit dem Wert "0,7", um sich an Ihre Bedürfnisse anzupassen. Die Zeilen werden dort eingefügt, wo Sie die Schriftart des Bodys definieren.

hier ist ein Beispiel:

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;
2
Zeton

Ich hatte ein paar Monate das gleiche Problem. Schließlich wurde es durch Deaktivieren der folgenden Einstellungen in den Einstellungen des Chrome-Browsers behoben.

Setzen Sie "Accelerated 2D Canvas" auf "Disabled" (Wechseln Sie in der Adressleiste des Browsers zu chrome: // flags # disable-accelerated-2d-canvas, ändern Sie die Einstellung und starten Sie den Browser erneut.)

Da sich der Fix für dieses Problem eindeutig geändert hat, sollten Sie generell alle hardwarebeschleunigten Text-/2D-Rendering-Funktionen in der Zukunft deaktivieren, wenn dieser Fix nicht mehr funktioniert.

In Google Chrome 55 scheint dieses Problem erneut aufgetreten zu sein. Wie erwartet, wurde durch die Korrektur die Hardwarebeschleunigung deaktiviert, es wurde lediglich der Standort geändert.

Der neue Fix (für mich) scheint zu sein:

Einstellungen -> Erweiterte Einstellungen anzeigen ... -> System UNCHECK "Hardware-Beschleunigung verwenden, wenn verfügbar"

https://superuser.com/questions/821092/chromes-fonts-look-off

0
Bell