body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}Nutzen Sie am besten die schönste Helvetica, die Sie haben können...
Besser Helvetica
Chris Coyier am
super danke :D
Cool, ich denke, ich werde ein paar davon verwenden,
Danke Chris
perfekto!
Habe dies gerade benutzt. Man weiß nie, wer Helvetica Neue auf seinem Computer installiert hat!
Stimme zu!
Tatsächlich habe ich das, aber ich habe nie bemerkt, dass ich es tat, also hat dies meine Webseite um 200 % besser gemacht. Danke Chris!
Ich stimme zu
Gute Idee, einen Schriftsatz zu verwenden, der von perfekt bis null abfällt, wie dieser.
Nun, gut, es ist sehr nützlich
Sehr cool, das wird nützlich sein.
Perfekt! Liebe das, sehr nützlich. Ich liebe Helvetica.
Ja, tolles kleines Schnipsel. Suchte gerade nach Rat zu Helvetica auf einer Website.
Hey, das ist süß ... obwohl es in Safari oder Chrome nicht zu funktionieren scheint ... es sieht in Firefox großartig aus ... aber nicht in den anderen 2 ... irgendwelche Ideen, warum ??
Habe dies gerade gelesen. Sie werden die Antwort, die Sie brauchen, hier finden
http://angelobeltran.com/blog/articles/helvetica-neue-the-ugly-truth/
Es ist eine traurige, traurige Wahrheit :-(
Hallo Leute, ihr könntet dies zu eurem CSS hinzufügen, es hebt die Schriftart in Webkit-Browsern wie Safari und Chrome wirklich hervor.
html { -webkit-font-smoothing: antialiased; }
Hallo. Ich weiß, das ist etwas spät. Aber haben Sie irgendwelche Optimierungstricks für die Schriftart Verdana? Oder können Sie nur Helvetica auf diese Weise optimieren?
Verdana-Schriftzug hier, sowie viele andere und die beste installierte Schriftartenerhebung.
gut zu wissen.
Vielleicht etwas spät (ab dem Veröffentlichungsdatum dieser Geschichte), aber ich nehme auch gerne „Liberation Sans“ in meinen Schriftsatz auf.
Es ist in Red Hat, Fedora, Ubuntu (und mehr) enthalten, aber nach allem, was ich sehen kann, sieht es nicht genau gleich aus wie Arial/Helvetica.
Ich habe Helvetica Neue nie in meinen Schriftsatz aufgenommen; normalerweise benutze ich Helvetica, Arial, „Liberation Sans“, sans-serif. Aber ich werde es wahrscheinlich in Betracht ziehen. :)
Kannst du nicht `@font-face` verwenden und die gesamte Schriftfamilie Helvetica auf deiner Website einbinden?
Natürlich bin ich mir nicht sicher, ob die Helvetica-Familie frei verwendet werden kann, ohne eine Lizenz.
Soweit ich weiß, kann Helvetica Neue in eine Web-Schriftart umgewandelt werden (ich benutze Font Squirrel), solange die Dateien nicht auf einem Desktop verwendet werden können. Ich habe die Lizenz für die auf dem Mac installierte Helvetica Neue gelesen und sie besagt im Grunde, dass die Schriftart auf einer Website nur zur Anzeige eingebettet werden kann und solange die auf dem Server installierte Schriftart nicht extrahiert und auf einem Desktop-Computer installiert werden kann.
Habe dies für ein paar Projekte verwendet, liebe es absolut!
Das ist absolut großartig, ich verweise ständig auf diese Seite zurück.
Tolle Liste. Ich habe dies zu meiner CSS-Datei hinzugefügt.
Tolle Lösung! Eine Frage: Wenn ich einen Teil des Textes fett mache, funktioniert das nicht mehr, wahrscheinlich weil die Schriftstärke eingestellt ist?
Ich hatte kürzlich einen Kunden, der auf Helvetica Light bestand, aber Schwierigkeiten hatte zu verstehen, dass einige Geräte die Schriftart einfach nicht haben, so dass die Fallback-Anzeige angezeigt wird. Ich habe beschlossen, einen Vergleich mit einer Typekit-Schriftart und einer Google-Webschriftart neben Helvetica und Arial zu erstellen. Hier ist die daraus resultierende Demoseite
http://demo.astronautdesigns.com/helvetica/
Die neue Android Ice Cream Sandwich-Schriftart namens Roboto sieht Helvetica sehr ähnlich, aber VIELE besser, sie ist kostenlos für alles, was Sie wollen. Googles erstaunlich, sie geben so viel. Es ist eine großartige Schriftart.
@fontface?
http://www.fontsquirrel.com/
Habe gerade bemerkt, dass Twitter diesen Schriftsatz verwendet ... font: „HelveticaNeue,“Helvetica Neue”,Helvetica,Arial,sans-serif;
Wenn ich es jedoch in Chrome/Mac ansehe, bewirkt „HelveticaNeue“ (ohne Leerzeichen), dass die Schriftart zu einer Serifenschriftart (in diesem Fall die Standardeinstellung des Browsers) wechselt, anstatt zur nächsten Schriftart im Schriftsatz. Ich bin mir nicht sicher, was hier passiert, aber es lässt mich über andere Fälle nachdenken, die dazu führen könnten, dass der Schriftsatz fehlschlägt und auf die Standardeinstellung des Browsers zurückfällt.
FYI: Eine Möglichkeit, eine unerwartete Browser-Standardeinstellung zu vermeiden, besteht darin, body{font-family:serif} zu definieren, bevor andere Schriftsätze verwendet werden, um sicherzustellen, dass der Browser-Standard überschrieben wird.
Ich bin auf diesen Beitrag gestoßen, als ich nach demselben Problem gesucht habe: Chrome/Mac wechselt unerklärlicherweise zu einer Serifenschriftart.
Andere Schriftart, aber derselbe Grund - wenn sie auf eine nicht installierte Schriftart ohne Leerzeichen stößt, scheint sie alle nachfolgenden Schriftarten im Schriftsatz zu ignorieren ...
Die Problemumgehung (Festlegen einer Standard-Schriftart für Body- oder HTML-Elemente) funktioniert gut.
Entschuldigung ... ich meinte body{font-family:sans-serif}
Zusätzlich zu Helvetica, die in IE unscharf aussieht, gibt es ein weiteres größeres und weniger bekanntes Problem mit den neuesten Versionen von IE, insbesondere IE9+ und der Adobe Type 1-Version von Helvetica. Ich habe einen Artikel verfasst, der das Problem beschreibt, aber kurz gesagt, IE9 kann keine Website laden, die versucht, Helvetica in ihren CSS zu verwenden, wenn der Endbenutzer eine Adobe Type 1-Version von Helvetica auf seinem Computer installiert hat. Wenn Sie mehr Details zu diesem Problem wünschen, können Sie meinen Artikel dazu hier lesen
http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html
Das ist die beste Schriftart aller Zeiten. Sie können diese Schriftart über die Google-Website beziehen (kopieren Sie einfach das Metatag mit dem Link zu dieser Schriftart) und alles wird in Ordnung sein.
Tolle Arbeit! Kann ich den Schriftsatz mit „Helvetica Neue“ einfach verwenden, ohne rechtliche Konsequenzen zu erwarten?
Danke nochmal Mann. Dein CSS-Wissen ist großartig und immer nützlich.
Wenn wir über den Aufwand der Lizenzierung von Helvetica Neue sprechen, gibt es eine `@font-face`-eingebettete Schriftart, die kostenlos, einbettbar und Helvetica sehr ähnlich ist, die **TeX Gyre Heros** heißt (auf Font Squirrel zu finden)
Das ist, was ich am meisten will ... danke
Ich habe dieses großartige Werkzeug gefunden. Es zeigt, wie die Schriftarten auf verschiedenen Plattformen aussehen.
Okay, das ist besser! Der Standard-Schriftsatz, der mit Bootstrap läuft, ist
"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;Ich hatte auf Chrome (Mac) üble Schriftartenprobleme mit völlig unlesbarem Text - alle Buchstaben wurden in etwas verwandelt, das wie ein A in einem Kasten aussah.
Ihr obiger Schriftsatz hat meine Schriftartenprobleme behoben. Ich werde ihn überall verwenden, wo ich Helvetica möchte ... DANKE !! :)
Danke !! Ich habe das Safari-Problem behoben :P
Funktioniert die Schriftart Helvetica Neue Bold nicht in IE7 & 8?
Das ist eine großartige Lösung, AUSSER, was soll das ursprüngliche „HelveticaNeue-Light“ darin? Ich frage nur, weil seltsamerweise auf einem iPhone 4 dies zu einer wirklich schlechten, kondensierten Schriftart führt, die in keiner Weise Helvetica ist. Mein genauer Schriftsatz, der dieses Problem verursacht hat, war
font-family: „HelveticaNeue-Light“, „Helvetica Neue Light“, „Helvetica Neue“, Helvetica, Arial, „Lucida Grande“, sans-serif;
Der korrigierte
font-family: „Helvetica Neue Light“, „Helvetica Neue“, Helvetica, Arial, „Lucida Grande“, sans-serif;
Gibt es auch einen Computer, der kein Arial hat, sodass er auf Lucida Grande zurückfällt?
Ich habe genau dasselbe Problem, sogar im iOS Simulator.
Vielen Dank, das hat mich wochenlang verrückt gemacht. Jetzt ist das gelöst! :)
Welchen Schriftsatz verwenden Sie? Können Sie uns den Code geben? Ich liebe Ihre Schriftarten.
Es wäre vielleicht auch ratsam, „HelveticaNeueLT Com 55 Roman“ (für die Standard-Roman-Version) hinzuzufügen. Warum? Weiß ich nicht. Ich habe es mehrmals unter Windows gesehen.
@Heather @Bobby Jones Um die Unschärfe in IE zu vermeiden, verwenden Sie nummerierte Gewichte anstelle von
normalundbold, das scheint aus irgendeinem Grund zu funktionieren.@Simon Korrekt. Das ist alles, was Sie wirklich brauchen ->
font-family: „Helvetica Neue“, Helvetica, Arial, sans-serif;Dann rendertfont-weight: 300;Light undfont-weight: 200;rendert UltraLight und natürlich rendertfont-weight: 400;regulär.Ich wollte „ff-meta-web-pro“ auf meiner Website verwenden. Aber ich konnte das Verfahren nicht finden. Bitte helfen Sie mir.
Sie haben es auf Typekit :: https://typekit.com/fonts/ff-meta-web-pro
Ich habe dies exakt kopiert, und ich weiß, dass ich sowohl Helvetica Neue als auch Helvetica installiert habe. Ich weiß auch, dass ich Arial und mehrere andere Sans-Serif-Schriftarten habe, aber trotzdem wird auf Times New Roman zurückgegriffen. Warum sollte das so sein?
Großartig! Ich habe das IE9-Problem behoben
Sie sollten auch erwähnen, dass dies das Problem unter Windows behebt, wenn Helvetica installiert ist, greift es auf Ultra Light zurück (was nicht leicht zu lesen ist)
Wenn diese Schriftart „HelveticaNeue-Light“ im Schriftsatz vorhanden ist, verursacht dies ein Problem mit Safari auf iPhone und iPad ... tatsächlich erscheint eine seltsame Schriftart. Deshalb schätze ich, dass es besser ist, diese zu entfernen
Das ist wirklich schön. Aber was ist, wenn der Benutzer die Schriftart nicht hat?
ABER ICH LIEBTE ES IMMER NOCH.
Beste Grüße
Ich weiß es nicht, aber es wäre sehr großartig, wenn es eine Web-Schriftart gäbe, die identisch mit Helvetica Neue aussieht. Schriftarten wie Arimo, TeX-Gyre-Heros und Roboto sehen als Web-Schriftart-Backup sehr vielversprechend aus, aber sie sehen an vielen Stellen immer noch nicht gut aus.
Ich schätze, der obige Schriftsatz ist bisher der beste. Eine Sache, die ich daran einfach hasse, ist die Anwesenheit meines Erzfeindes - Lucida Grande.
Ich habe diesen einfachen CSS-Code-Schnipsel für meine Portfolio-Website verwendet http://ejstudios.net und er funktioniert großartig. Sie können immer eine bessere Helvetica verwenden. Warum eine unterlegene Version der Schriftart verwenden, wenn Sie die beste verwenden können.
Guter Schriftsatz - obwohl ich dazu neige, Lucida und Arial wegzulassen und die Sans-Chips fallen zu lassen, wo sie wollen. Eine Sache, die ich bemerke, ist, dass Kursive auf meinem iPad fett erscheinen - also verwende ich am Ende eine zusätzliche Anweisung, die cite, em, i auf schlichtes altes Helvetica (Gewicht 300) zurücksetzt, um die Dinge wieder in Ordnung zu bringen.
Ja, ich war einst stolzer Besitzer von Helvetica Neue. Und dann gab es Calibri/Calibri Light. Neue hat bessere Formen. Calibri hat eine bessere Abstandsgestaltung. Eines ist sicher mit der aktuellen Technologie: Sie können den Abstand und die Formen nicht zwischen Schriftfamilien teilen. Typografie ist ein wildes Tier, und das wirklich.
Wie ist der Stand bezüglich der tatsächlichen Verwendung eines offiziellen @font-face-Kits für Helvetica? Ich habe es selbst konvertiert und auf ein paar Websites verwendet, aber es war nicht ideal. Gibt es ein Foundry online, das es als @font-face-Kit lizenziert?
Versuchen Sie dies für Ihre CSS für,
Safari und Chrome.
html { -webkit-font-smoothing: antialiased; }
Abgesehen von Mac-Benutzern hat praktisch niemand Neue Helvetica auf seinen Computern installiert.
Tolle Liste, funktioniert perfekt für mich
Von FontStack
font-family: „Segoe UI“, Frutiger, „Frutiger Linotype“, „Dejavu Sans“, „Helvetica Neue“, Arial, sans-serif;
@Simon Korrekt. Das ist alles, was Sie wirklich brauchen -> font-family: „Helvetica Neue“, Helvetica, Arial, sans-serif; Dann rendert font-weight: 300; Light und font-weight: 200; rendert UltraLight und natürlich rendert font-weight: 400; regulär.
http://www.kpjwebindia.com/rkjaiswal/
Designer müssen aufhören, Helvetica Neue für Web-Schriftarten zu verwenden (Print ist in Ordnung). Es gibt Tausende von Schriftarten da draußen, Designer sind einfach nur faul, indem sie eine Mac-Systemschriftart verwenden. Ja, ich verstehe, dass du es magst, aber wenn wir es wegen Einschränkungen nicht in @font-face oder Cufon konvertieren können, sollte dir das etwas sagen. Es ist schlechte Praxis für Designer und sie sollten damit aufhören, es treibt Entwickler in den Wahnsinn. Ich kann mich nicht einmal erinnern, wie oft ich Designer gebeten habe, eine andere Schriftart zu finden.
Wenn ich nur meine Kunden dazu bringen könnte, Ihnen zuzustimmen.
Danke!
Wenn Sie dies für Textfelder verwenden, fügen Sie besser „letter-spacing: 1px“ hinzu und ändern Sie font-weight auf „400“, es ist viel leichter zu lesen, gut für die Benutzererfahrung
Vielen Dank, tolles Nachschlagewerk!
Sie müssen Helvetica-Neue auf Ihrem Server hochgeladen haben. Und codieren Sie es so.
Das ist nicht erlaubt. Helvetica Neue ist eine professionelle, kommerzielle Schriftart, die viel Geld wert ist. Sie können keine Web-Schriftart-Versionen davon erstellen und sie auf Ihrem Server hochladen, damit andere sie verwenden können. Jemand korrigiere mich, wenn ich falsch liege.
Probieren Sie es aus, Scott, es ist seltsam, aber es funktioniert. Derselbe Code wird auf andere Schriftarten angewendet, wenn Sie benutzerdefinierte Schriftarten hinzufügen möchten.
Hier habe ich projects.fiftystudio.com/saratoga verwendet
@font-face {
font-family: latolight;
src: url("../../fonts/Lato-Light.ttf");
}
@font-face {
font-family: latolightitalic;
src: url("../../fonts/Lato-LightItalic.ttf");
}
@font-face {
font-family: latoregular;
src: url("../../fonts/Lato-Regular.ttf");
}
@font-face {
font-family: latobold;
src: url("../../fonts/Lato-Bold.ttf");
}
@font-face {
font-family: latohairline;
src: url("../../fonts/Lato-Hairline.ttf");
}
Ich suche immer noch nach der Website, auf der ich „Helvetica Neue“ verwendet habe. :)
Wie Sie wissen, verwendet Bootstrap standardmäßig font-family: ‚Helvetica Neue‘, Helvetica, Arial, sans-serif;
Das Problem ist, dass ich heute die Bootstrap-Navbar eines meiner Projekte auf dem Computer eines Kunden (Chrome unter Windows) gesehen habe und sie durch „Helvetica Neue Bold“ in einer invertierten und umrissenen Version ersetzt worden war. Das Ergebnis war schrecklich.
Die Überprüfung der installierten Schriftarten zeigt „Helvetica Neue“, aber die normale Version war nicht eingebettet. Es gab die Version „Helvetica Neue Bold“ (die gedruckte Schriftart) und ein paar mehr.
Ich habe beschlossen, „Helvetica Neue“ aus der Liste zu entfernen und Helvetica als erste Option zu belassen. Dies löste das Problem, aber ich würde gerne wissen, ob es eine visuell äquivalente Ersetzung für Helvetica Neue in Google Fonts gibt. Ich habe bereits gesucht, aber ich werde buchstäblich blind und Schriftarten sind meine Achillesferse.
Beste Grüße
Ich habe beschlossen, meinen Designer zu bitten, Helvetica komplett aus unseren Designs zu streichen.