„Ihre Schriftarten werden auf Opera Mobile seltsam gerendert.“
Danke, dass Sie sich die Zeit genommen haben, mir das mitzuteilen. Können Sie mir einen Screenshot schicken, damit ich ihn sehen kann?
Wow, das ist seltsam. Ich verwende benutzerdefinierte Schriftarten über @font-face und einen Drittanbieterdienst. Es ist nicht nur eine Frage, dass die benutzerdefinierte Schriftart fehlschlägt und zu einer anderen Schriftart zurückfällt, die wegen unterschiedlicher Abstände und so weiter seltsam aussehen kann. Es scheint, dass
- Einige Zeichen werden in der korrekten @font-face-Schriftart gerendert
- Einige Zeichen werden in der Fallback-Schriftart gerendert
- Einige Zeichen werden gar nicht gerendert (Box mit X-Symbol)
Erstens weiß ich, dass es zwei verschiedene Arten von Opera Mobile-Browsern gibt: „Opera Mini“ und „Opera Mobile“. Ich sollte mich da schnell einarbeiten.
{Googelt „opera mini und opera mobile“.}
Finde einige seltsame Forenbeiträge, klicke mich ein wenig durch und lande bei einem ordentlichen Blogbeitrag, der den Unterschied erklärt.
In Opera Mini befindet sich die Opera Presto-Browser-Engine auf einem Server. In Opera Mobile ist sie auf Ihrem Telefon installiert.
Die Person, die wegen des Schriftartenproblems gemailt hat, sagte, es sei Opera Mobile, also werde ich das zuerst testen. Aber da ich mir vorstelle, dass nicht jeder auf der Welt überhaupt weiß, dass es verschiedene Arten von Opera-Browsern auf Mobilgeräten gibt, werde ich die andere testen, falls nötig. Es scheint tatsächlich eher Mini das Problem zu sein, da ich mir vorstellen kann, dass eine serverseitige Rendering-Engine spezielle Tricks anwendet wie z. B. „nur X Sekunden warten“ für Drittanbieterressourcen oder so etwas, wodurch eine Schriftartdatei halb heruntergeladen wird.
Ich frage mich, ob ich das selbst reproduzieren kann.
Ich habe irgendwo ein Kindle Fire herumliegen, aber das Ding hat diesen seltsamen Amazon Silk Browser, und ich glaube nicht, dass er mir erlaubt, andere Browser herunterzuladen. Ich habe ein Nexus 7, das ich zum Testen unter Android gekauft habe, aber ich bekomme es nie eingeschaltet. Ich habe es einmal zum Laufen gebracht, aber ich musste die Rückseite abnehmen und es praktisch mit einem Messer anstechen, bis es funktionierte. Ich habe es noch nicht geschafft, es in einen Vulkan zu werfen.
Vielleicht sollte ich ein neues Android-Gerät für Tests kaufen, das besser bewertet ist. Oder vielleicht ein Gerät, das Opera standardmäßig hat. Na ja, dafür ist jetzt gerade keine Zeit.
Kann mir BrowerStack das vielleicht emulieren? Ooooh, das kann es, schön.
Bingo.
Jetzt kann ich das Problem zumindest reproduzieren. So kann ich, wenn mir etwas zur Änderung einfällt, die Ergebnisse testen. Allerdings gibt es in diesem Emulator leider keine DevTools, sodass er mir das Problem nicht allein erklären kann.
Vielleicht gibt es einen Emulator, den ich selbst ausführen kann? Ooooh, den gibt es! Gut gemacht, Opera.
Während ich auf den Download warte, google ich ein wenig herum. Hmmm, ein Beitrag von Mr. Zeldman, der **extrem** ähnlich ist. Seine Lösung war die Nutzung eines Drittanbieterdienstes (z. B. Typekit), im Grunde weil sie sich damit auskennen. Oder die Nutzung eines vertrauenswürdigen Tools wie des Font Squirrel-Generators, um die beste Qualität der Dateien und Syntax sicherzustellen.
Leider nutze ich bereits einen Drittanbieterdienst (Cloud Typography), sodass ich dort nicht viel Kontrolle habe. Ich werde weiter selbst daran arbeiten, aber ich werde ihnen eine E-Mail schreiben und das Problem beschreiben. Hauptsächlich, damit sie davon erfahren, aber auch, weil sie vielleicht eine Korrektur haben, die ich ausprobieren könnte.
{Tippt die E-Mail und sendet sie ab.}
Okay, der Emulator ist fertig heruntergeladen.
Es funktioniert. Cool. Auf der Download-Seite wurde es so dargestellt, als könnte man Opera Dragonfly zur Fehlerbehebung von hier aus nutzen, aber wenn man die Dokumentation liest, scheint dies nur für lokale Seiten möglich zu sein und es ist ein etwas seltsames Setup. Außerdem stelle ich jetzt fest, dass in der von mir verwendeten Opera-Version die Chrome DevTools praktisch integriert sind, nicht Dragonfly. Müsste ich also eine alte Opera-Version herunterladen, um das zu tun? Uff, ich habe das Gefühl, dieser Kaninchenbau wird zu tief.
Vielleicht sollte ich mir eine andere Website ansehen, die denselben Drittanbieterdienst wie CSS-Tricks nutzt. Wir verwenden auch auf CodePen Cloud Typography, um Schriftarten bereitzustellen, aber ganz andere Schriftarten, das wäre also auch ein interessanter Test.
Ah ha! Ähnlich auf störende Weise.
Das ist der stärkste Hinweis bisher. Es muss einfach daran liegen, wie Cloud Typography funktioniert. Leider habe ich wenig Kontrolle darüber, da sie die Dateien bereitstellen und sie absichtlich ziemlich verschleiert sind.
Ich habe jedoch die Kontrolle darüber, ob ich den Stylesheet überhaupt bereitstelle oder nicht. Ich weiß, ich bin noch nicht bereit, benutzerdefinierte Schriftarten ganz aufzugeben, weil ich sie mag und sie im Allgemeinen gut funktionieren, aber vielleicht kann ich sie irgendwie nur für Opera Mobile aufgeben.
Es ist immer ein wenig verlockend, User-Agent-Erkennung zu versuchen. Opera bietet Dokumentationen dafür, was sie tun, und ich könnte es jederzeit testen. Aber ich bin zögerlich. Nicht nur ist es theoretisch schlecht, sondern jedes Mal, wenn ich es getan habe, habe ich es bereut, weil es entweder nicht das erfasst hat, was ich wollte, zu viel erfasst hat oder beides. Außerdem finde ich keine guten PHP-Code-Schnipsel speziell dafür und ich bin ein besserer Balletttänzer als Regex-Schreiber. Möchte ich diese Straße noch einmal gehen? Nicht wirklich.
Ich könnte auch ein wenig in die Analysen schauen, um das Ausmaß dieses Problems zu sehen. Hier sind die Top 10 Browser hier
„Opera Mobile“ taucht nirgends in der Liste auf, selbst wenn man alle 189 dargestellten durchsieht. Es muss entweder bei „Opera“ (ein Teil von 1 %) oder „Opera Mini“ (ein Teil von 0,1 %) zusammengefasst sein. Mobile macht insgesamt etwa 3 % auf dieser Website aus, was iOS und Android einschließt, die weitaus beliebter sind. Ich glaube also, dass dies wahrscheinlich etwa 0,25 % der Leute betrifft.
Ich möchte das wirklich beheben, aber angesichts der super kleinen Zahlen, des Mangels an guten Testtools, der Dinge, die außerhalb meiner Kontrolle liegen, und der potenziellen Gefahren einiger Lösungen, fühle ich mich ziemlich hilflos. Ich werde wohl einfach warten und sehen, was der Anbieter zu sagen hat.
Dies ist nur eine Geschichte darüber, wie es ist, ein Frontend-Entwickler zu sein. Es geht nicht einmal so sehr um Schriftarten, sondern um den Kampf, den Prozess und die Entscheidungen.
Ich habe einen ähnlichen Fehlerbehebungsprozess, aber irgendwann am Anfang hätte ich aufgehört, ein paar Cracker oder andere Snacks und vielleicht einen Red Bull zu holen.
Beispiel
Völlig abseits des Themas, sag mir, wie kannst du zuckerfreien Red Bull trinken? ;)
Chris,
Ich trinke jede Art von Red Bull (einschließlich der „Zero“- und Limited-Time-Sorten). Ich glaube, ich bevorzuge inzwischen zuckerfrei. Das Original schmeckt zu sirupartig.
Die andere Kombination, die seltsame Ergebnisse liefert (im Allgemeinen, nicht unbedingt hier), ist Safari unter Windows!
Klingt nach meiner Problemlösung mit allem, was mit IE zu tun hat
bazar6, eigentlich kann man ein Problem mit IE nicht lösen. Per Definition ist Internet Explorer selbst ein Problem. :D Nun, man könnte auch sagen, es ist eine Missgeburt eines Browsers.
User-Agent-Erkennung wäre die schnellste Lösung hier, bis entweder Opera oder Cloud Typography das Problem beheben.
Hier ist eine schnelle Methode mit JavaScript, die meiner Meinung nach funktionieren sollte
if(navigator.userAgent.match(/Opera Mobi/)) { $('html').addClass('opera-mobile'); }Verwenden Sie dann .opera-mobile, um diesem Browser andere Schriftarten zuzuweisen. Ich glaube nicht, dass „Opera Mobi“ zu viel oder zu wenig erfasst. Wenn das Problem behoben ist, können Sie einfach diese eine Zeile JS und ein paar Zeilen CSS entfernen und fertig.
Ich würde PHP verwenden
Auf diese Weise erhalten Sie den zusätzlichen Vorteil: Wenn der Benutzer Opera Mobile ist, verschwenden Sie keine Zeit mit dem Laden von Ressourcen, die er nicht verwenden kann, und umgekehrt für den Rest der Menschheit – sie benötigen den Opera-Stylesheet nicht.
ja!
Danke, Chris! Du hast nicht nur ungefähr die Hälfte meiner beruflichen Kopfschmerzen beschrieben (die anderen betreffen SVN und den Übergang des Büros zu Scrum). Ich kann diesen Emulator auch für meinen eigenen obskuren mobilen Opera-Bug verwenden, der kürzlich aufgetreten ist, ziemlich cool.
Pro-Tipp für alle anderen, die im Marketing Frontend entwickeln: Marketer hören zu, wenn Sie ihnen sagen, dass praktisch niemand außer einem Typen in Kansas den Bug sieht. Sie kennen die Zahlen. Freelance-Kunden hingegen ... vielleicht einfach Kunden aussortieren, die lahme Browser oder beschissene Geräte verwenden? Hahaha
Liest sich wie ein Roman für Nerds, mein Freund, der alle Herzseiten unserer Kämpfe berührt, die moralischen Standards, an die wir uns werfen. Erinnert mich daran, dass Entwickler einst, in einer nicht allzu fernen Vergangenheit, die Unterstützung für gut 50 % des Marktanteils auf einmal zurückhielten, weil die Unterstützung für mehr als einen Browser zu zeitaufwendig war. Und jetzt kämpfen und mühen wir uns über diese 0,25 %, den 190. Browser, der uns verfolgt, während wir versuchen, ihn zu gefallen und scheitern. Oh! Die Härte!
Das ist der Preis, den man für (Pseudo-)DRM zahlt :(
Aus Neugier habe ich diese Woche einige Seiten auf Opera Mini für iOS getestet. Einfache Seiten scheinen keine großen Probleme zu haben, aber als ich die komplexen Seiten, die wir entwickelt haben, getestet habe, hatten alle Probleme (hauptsächlich CSS und jQuery) und wie Sie richtig bemerkt haben, ist die Anzahl der Benutzer mit diesem Browser so gering, dass wir keine Zeit investieren werden, um die Seiten für diesen Browser zu korrigieren.
Da die Seite auf dem Opera-Proxy gerendert wird, hat der Client auch keine JavaScript-Engine. Das bedeutet, es gibt einige Heuristiken, die Omini mitteilen, wann es die aktualisierte Version abrufen soll (oder ob es das überhaupt tun soll).
241 Millionen sind keine kleine Zahl. Die Nutzung von Opera Mini mag für eine Seite wie diese minimal sein, aber global ist sie riesig.
http://www.operasoftware.com/smw/2013-11
Nun, das passiert mit Dolphin Browser auf Android 4.2.1: http://m.imgur.com/JnTcFFi
Ich habe es auch mit dem Stock-Browser versucht, der Text läuft nicht über, aber die Schriftart wird exakt auf dieselbe seltsame Weise gerendert.
Wenn ich das richtig verstehe, ist Cloud Typography kostenpflichtig... Wenn man also bezahlen muss, sollte man meiner Meinung nach für einen Dienst bezahlen, der funktioniert. ;-)
Ich würde mir keine Sorgen um „Opera Mobile/Classic“ machen. Es basiert auf der eingestellten Presto-Engine (beste Engine aller Zeiten, btw <3) und wurde vor 9 Monaten automatisch durch den „Opera Browser“ (der auf Chromium basiert) ersetzt. Es ist immer noch verfügbar, weil es ein paar laute Stimmen gab, die es zurückwollten.
Ich benutze Opera Mobile fast ausschließlich auf meinem N7. Seit dem Wechsel zu Blink/Chromium habe ich hier keine Probleme mehr. Vorher hatte ich das erwähnte Problem konstant. Auf meinem Linux-Desktop immer noch, da die neueren Versionen noch nicht unter Linux laufen (und ich wahrscheinlich sowieso nicht wechseln werde, da die Funktionalität dramatisch reduziert ist).
Etwa 40 % meines typischen Arbeitstages schreibe ich eine Variante von CSS, 40 % google ich, meist Stack-Overflow-Artikel, 20 % anderes.
Plus 1 für Stack Overflow und Google! Chris…wäre schön, wenn Sie die Daumen-hoch-Funktion hätten, mit der wir die Anzahl des Gefallens dieser Antwort erhöhen können…wie wer??? Stack Overflow! :o)
Ist jetzt der richtige Zeitpunkt zu erwähnen, wie das manchmal bei mir passiert, wenn ich den Stock-Browser von Android 4.1 benutze (den, der als „Browser“ bezeichnet wird und mit CyanogenMod und ähnlichen Custom ROMs ausgeliefert wird)? Ich meine, nicht die durchkreuzte Box-Sache, aber manchmal sehen die Überschriften-Schriftarten komisch aus, als ob einige richtig gerendert wurden, aber einige in einer Fallback-Schriftart gerendert wurden. Ich werde so schnell wie möglich ein Bild machen.
Ich sehe keinen Bearbeiten-Button, also hier ist er: http://imgur.com/XEYLPAY&hfp2OkQ Es sind zwei Bilder, also klicken Sie auf den Weiter/Zurück (ich weiß nicht mehr, welcher)-Button, um das andere zu sehen.
Ich bin einmal auf ein ähnliches Problem gestoßen und habe Folgendes entdeckt: http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/#typography
Was seltsam erscheint: „Bei Schriftfamilien verwendet Opera Mini nur eine Schriftfamilie pro Seite, und die Einstellung von font-family hat keine Auswirkungen, außer im Fall von Monospace-Schriftarten, wo es Monospace simuliert.“
Eine Antwort auf SOverflow schlug auch vor, dass es mit dem Meta-Tag „screen vs „handheld“” zusammenhängt
http://stackoverflow.com/questions/5593828/opera-mini-and-css
Ich bin mir nicht sicher, ob das hilft, aber interessantes Problem. Halte uns auf dem Laufenden, wenn du es gelöst hast?
Das kommt ziemlich unhöflich rüber, aber hier ist mein Prozess
Analysen ansehen
Alle Browser < 1 % ignorieren.
Ich denke, das ist manchmal fair. Wir haben das mit IE 6 gemacht, lange bevor er bei 1 % war. Es ist jedoch wichtig zu bedenken: 1 % und wachsend oder 1 % und sinkend? In diesem Fall könnte er auch sinken, da der Wechsel zu Blink erfolgte.
Um ein Nexus 7 einzuschalten, halten Sie einfach den Netzschalter eine Minute lang gedrückt, irgendwie Nexus 7 und Einschalten sind Dinge, die nicht gut zusammenpassen xD
Mein Nexus 7 der 1. Generation braucht entweder etwa eine Minute lang gedrückt halten des Netzschalters oder etwa 10 Sekunden. Auf jeden Fall mag ich es im Allgemeinen.
Ich sehe das aktuell mit Android und habe dieselben „seltsamen“ Schriftarten in der Kopfzeile. Besonders mit den fetten Schriftarten. Keine Kästchen, aber definitiv andere Schriftarten.
Übrigens, Chris, es ist ziemlich seltsam, dass du als Frontend-Entwickler kein Android-Gerät zum Testen hast. :P Ich halte es für wichtig, weil es zum Glück das ist, was man heutzutage auf den meisten Geräten findet, das böse iOS wird glücklicherweise nur auf Apple-„Kram“ reduziert. :)
Aber wenn du immer noch darüber nachdenkst, das Nexus wegzuwerfen, bezahle ich dir gerne die Versandkosten, um es zu mir zu schicken. :D Eh eh, nur ein Scherz. ;)
Mit Opera Mobile und Dragonfly können Sie externe Seiten debuggen! Die lokale IP-Adresse wird nur von Opera verwendet, um eine Verbindung zum Emulator herzustellen. Sie können wahrscheinlich sogar Opera Dragonfly auf einem Computer ausführen und eine Seite debuggen, die auf einem anderen Computer im Emulator läuft. Die Seite hat nichts damit zu tun. Leider kann man das mit den neuesten Blink-basierten Opera Desktop- und Mobilversionen derzeit nicht tun.
Ich habe früher Opera Mini auf einem alten Feature-Phone benutzt, weil es eine massive Verbesserung gegenüber dem Standardbrowser war. Ich kann nicht glauben, dass es immer noch auf Android verfügbar ist und als „schnellster Browser“ beworben wird, wenn es doch nur die Unterstützung für Dinge wie Web-Schriftarten entfernt.
Das gleiche Problem habe ich auch mit dem WebKit-Browser von Blackberry, fürchte ich. Ich weiß nicht, wie man ein Blackberry screenshotet. Es ist das Bold, mit physischer Tastatur.
Ein weiteres Problem mit der Website ist, dass der Browser beim ersten Versuch, einen Kommentar zu schreiben, abstürzt – danach funktioniert er einwandfrei (scheint speicherbezogen zu sein).
Das klingt nicht nur vertraut, sondern scheint meine tägliche Routine bei der Entwicklung zu sein.
Was Sie jedoch vergessen haben zu erwähnen, ist der Moment der Erleichterung, wenn Sie tatsächlich **eine** funktionierende Lösung finden, sie implementieren und sich stolz genug fühlen, wieder ein paar Minuten lang Ihren Geek-Bart zu streicheln (bis das nächste seltsame Problem auftritt, an das Sie nie gedacht hätten).
Erwägen Sie, ein Open Device Lab in Ihrer Nähe zu besuchen, um dieses Verhalten auf echten Geräten zu testen und zu reproduzieren? Das könnte helfen, Einblicke zu gewinnen, Fehler zu beheben und es nachzuverfolgen…
Haben Sie andererseits versucht, die Schriftartquelle abzurufen und sie zu analysieren? Liefern sie SVG-Fonts? Wenn ja, ist dies eine ziemlich gute Möglichkeit, Probleme zu verfolgen.
Ihre Lösung war also, die Hände zu ringen und etwa eine halbe Stunde lang zu sehen, was Google darüber weiß, während Sie einige Emulatoren herunterladen, um zu sehen, ob Sie es auch sehen können? Dann, nachdem Sie bestätigt hatten, dass es sich um einen Bug bei diesen Cloud-Leuten handelt (und dass es auf der Welt nur 3 Opera-Benutzer gibt), haben Sie eine E-Mail gesendet mit der Aufforderung „helft mir/behebt es!“? Herkulisches Unterfangen, mein Sohn. Wirklich, das ist mein Traumjob, wenn das als Arbeit zählt und man dafür bezahlt werden kann.
Und Ihr Ansatz?
Scott, sein/ihr Ansatz wäre wahrscheinlich gewesen, einfach zu antworten: „Es ist nicht meine Schuld, ROTFLOL, Sie dummer Benutzer“, auch wenn er/sie die Web-Schriftarten selbst erstellt hat. Auf der anderen Seite hat Chris das Problem ordnungsgemäß isoliert und ist zu einer vernünftigen Schlussfolgerung gekommen, dass Cloud Typography schuld ist, weil das die Leute sind, die die seltsamen Web-Schriftarten erstellen. Aber wissen Sie, es ist einfach viel einfacher, auf einem Blog zu trollen (ohne einen Namen oder eine Website-URL anzugeben), als echte Arbeit zu leisten.
davidbwaters
Wird wegen anonymer Kritik, und damit Trollerei, begraben. Die Kritik ist in Ordnung. Bitte posten Sie sie erneut mit einem echten Namen und einer E-Mail.
Warum sind Sie an Cloud Typography gebunden? Ich gehe davon aus, dass es sich um kostenpflichtige Schriftarten handelt und die Lizenz nur deren Bereitstellung erlaubt. Wenn Sie die @fontface CSS-Datei kontrollieren können, versuchen Sie etwas wie dies. Das hat mir in der Vergangenheit geholfen, Rendering-Probleme in Chrome zu beheben.
Vielleicht löst es das Problem, bestimmten Browsern zu sagen, dass sie zuerst ein bestimmtes Format bereitstellen sollen. Ich habe das Problem auf Ihrer Website in einem Android-Browser (nicht sicher, welcher, aber ich glaube, es war Chrome oder der Standard-Android).
Wenn das nicht hilft, würde ich FontSquirrel verwenden, um entweder dieselben Schriftarten zu generieren (wenn die Lizenz dies zulässt), ähnliche Schriftarten (Sie könnten dies verwenden, um ähnliche, kostenlos nutzbare Optionen zu finden, oder Sie könnten nur Android ansprechen und die Schriftarten durch Varianten von Roboto, Roboto-condensed und Open/Noto Sans ersetzen. Diese sind ab Android 4 enthalten.
Ich bin nicht gebunden, ich entscheide mich dafür, sie zu verwenden, weil ich sie mag und sie nur so verfügbar sind.
Sie haben aber Recht, und das war Zeldmans Lösung oben, die Kontrolle über die Schriftartdateien selbst zu bekommen, sie durch den FontSquirrel-Generator laufen zu lassen und diesen Code zu verwenden.
Chris, Schriftarten funktionieren jetzt perfekt auf Android. Großartig! :)
Ich glaube, dass aus all dem ein guter Code-Schnipsel entstehen könnte (?), der als Standard (??) verwendet werden kann. Meiner bescheidenen Erfahrung nach ist Font Squirrels Ansatz bei weitem der beste.
Man muss jedoch bedenken, dass (je nach Lizenz) man auch eine Möglichkeit zur Sicherung der Schriftartdateien bereitstellen muss (d. h. sie nicht einfach dort liegen lassen, leicht herunterladbar), wofür der genannte Schnipsel zumindest von einer Apache-Regel begleitet sein sollte, die den direkten Zugriff auf die Schriftartdatei blockiert, während sie bei der Verwendung auf Ihrer Website weiterhin funktioniert.
Davon abgesehen würde ich deshalb Schriftarten mit einer offenen Lizenz bevorzugen ;)
Ich halte immer noch die Hoffnung, dass sich alle Browser irgendwann für dieselbe Rendering-Engine entscheiden. Dann kann das Web wirklich in die Zukunft schreiten.
Ich weiß nicht wirklich warum, aber CodePen funktioniert auf meinem Dolphin Beta (Android 4.0; HTC Wildfire) nicht gut.
Es mag seltsam erscheinen: Aber ich mag diese Serif-Sans-Serif-Kombination.
Interessante Lektüre, großartige Darstellung des Denkprozesses tatsächlich.
Ja, das ist nicht nur Opera. Ich sehe dasselbe Problem im Android Stock-Browser 4.2.1.
Ich wollte es Ihnen schon längst mitteilen, aber habe es immer wieder vergessen.
Es scheint also, dass basierend auf den Analysen und den obigen Kommentaren die Anzahl der betroffenen Benutzer viel größer ist als ursprünglich angenommen.
Du hast definitiv Recht. Seltsamerweise scheint es, dass die Entwickler von Cloud Typography ihre Sachen nicht auf etwas getestet haben, das kein super-proprietäres Apple-Trap ist. Das ist irgendwie seltsam!
Das hat mir Spaß gemacht zu lesen. Ich dachte, alle außer mir schnippen mit den Fingern und wissen sofort die Antwort auf solche Dinge. Schön zu wissen, dass ich in guter Gesellschaft bin. : )
Außerdem könnte eine Android-Virtuelle Maschine dies und zukünftige Probleme genau reproduzieren. Schauen Sie sich Android-X86 oder AndroVM an. Diese sind kostenlos, funktionieren mit Virtual Box (ebenfalls kostenlos) und Sie können die Auflösung ändern, um ein Tablet oder Telefon zu emulieren. Oder Sie könnten das Android SDK von Google installieren, das IMO viel langsamer und umständlicher ist. Es hat auch einen Emulator.
Toller Beitrag
Es ist nach der Lektüre einer „Geschichte“ wie dieser… einer, die so vertraut ist, dass ich anfange, mich zu fragen, wo in meinem Leben alles schief gelaufen ist… schnief. Scheiß drauf, ich bin fertig! Lebewohl, grausame World Wide Web… bis morgen.
Dasselbe passiert mir im Android Stock-Browser (4.3), aber ich benutze normalerweise Chrome (der gut aussieht), sodass ich es nicht bemerkt hätte, wenn es diesen Beitrag nicht gegeben hätte.
Wenn mich das nächste Mal jemand fragt, wie die Dinge auf der Arbeit laufen, schicke ich ihm diesen Beitrag.
Aber im Ernst, ich überprüfe zuerst die Analysen, nicht als letztes Mittel.
Das ist nicht viel anders als **Problemlösung** im Allgemeinen. Frontend, Backend bis zurück zur Algebra, wo wir anstelle von Browsern nach X auflösen würden.
Toller Artikel!
Ich erinnerte mich an einen Beitrag von Jeffrey Zeldman, der einmal das gleiche Problem hatte.
In seinem Fall wurde dies durch die Art verursacht, wie die Schriftarten ausgeliefert wurden: in zwei Teilen. In einigen Fällen lud der Browser nur einen Teil einer Schriftart, was das gleiche Problem wie das, dem Sie hier begegneten, verursachte.
Wenn ich im Webkit-Inspektor nachsehe, sehe ich
font-family: 'Whitney Cond A', 'Whitney Cond B', ronnia-condensed, sans-serif;: vielleicht ist es das gleiche Problem?Zurück zur Energy-Drink-Diskussion... Bevor Sie meine Empfehlung hassen – probieren Sie es einfach einmal aus: Monster Ultra. Er ist in einer weißen Dose und so viel besser als alle anderen Energy-Drinks da draußen. Er ist sanft, im Gegensatz zur restlichen Monster-Linie, die zu sehr nach flüssigem Jolly Rancher schmeckt; es ist koffeinhaltige Perfektion. IMHO.
Lance, nun, ich schätze, wir sind hier, um über Webentwicklung zu sprechen, nicht um eine bestimmte Marke von Energy-Drinks zu bewerben. :P
Manchmal kann ein einfaches Design Wunder wirken :) Zu viel Coding und skeuomorphes Design kann eine Qual sein.
Außerdem, warum wechseln Sie nicht auch zu Flat Design, wenn es die Welt tut? Es sähe cooler aus!
„Cooler“ oder nicht, das ist Geschmackssache. Persönlich gehöre ich zu denen, die denken, dass etwas nur deshalb zu tun, weil es jemand tut (oder besonders, weil Microsoft es tut), nicht cool ist, ganz im Gegenteil. Manche Trends sind schön, andere sind nur eine futile Mode, die auf lange Sicht zu verschwinden tendiert. :)
Hallo Chris,
Ich hatte nur Probleme mit Schriftarten, wenn der Server langsam war oder mit benutzerdefinierten Schriftarten. Ich liebe keine komischen Probleme, es ist schwer zu beheben.
Deshalb liebe ich einfaches Entwickeln.
Leider Chris, das beschädigt mein Bild von Ihnen auf eine Weise, die schwer zu ertragen ist. Aus welchem Grund auch immer habe ich bisher angenommen, dass Sie nicht nur die Antworten hatten, sondern auch die richtigen! Am Ende dieser Geschichte zu sein und zu erfahren, dass Sie keine perfekte Lösung gefunden haben, hat mich in die Tiefen der Verzweiflung gestürzt.
Genau deshalb finde ich seine Videos, in denen er laut denkt, so gut. Ich bin weitaus mehr daran interessiert, den Denkprozess richtig zu machen, als die eigentliche Lösung.
Danke für diesen Artikel. Ich bin der einzige Frontend-Entwickler an meinem Arbeitsplatz, daher ist es für mich toll, über den Problemlösungsprozess von jemand anderem zu lesen.
Nebenbemerkung… aufgrund von Website-Blockaden an meinem Arbeitsplatz kann ich diese Website zwar aufrufen, sie wird aber ohne Stylesheet gerendert. Das heißt, CSS-Tricks ohne jegliches CSS!
Wir untersuchen gerade dieses exakte Problem in meiner Firma. Nun, fast dasselbe Problem; nur die fehlenden Glyphen bei Whitney auf Android Gingerbread, wir haben nicht das gleiche „Lösegeld-Noten“-Ding wie Sie. Ich konnte erfolgreich ausschließen, dass es sich um ein tatsächliches Zeichen im Markup handelt. Charles Proxy und sein integrierter Hex-Editor waren an diesem Experiment beteiligt.
Aktuelle Theorien beinhalten eine bizarre Ligatur oder eine Art von Inhalt, der mit
:beforeMagie geliefert wird. Ich hoffe, bald mit H&FJ in Kontakt zu treten, um diesem Problem auf den Grund zu gehen. Lustiger Zufall though, ich wurde auf dieses Problem in meiner Organisation aufmerksam, vielleicht einen Tag bevor Sie dies gepostet haben. Ich werde Sie wissen lassen, wie es ausgeht.Ich habe auch ein ähnliches Problem, aber mit chinesischen Schriftzeichen. Gibt es chinesische Schriftarten, die von allen Browsern unterstützt werden?
Wie Eelco Deuling in seinem Kommentar schrieb, versucht Cloud Typography, seine Webfonts zu schützen, indem es sie in zwei Dateien aufteilt. Einige Buchstaben werden in Version A, einige in Version B geliefert. Sie paaren die beiden Schriftarten als Font-Stack.
Opera Mini verwendet nur eine Variante (Bens Kommentar).
Solange Cloud Typography seine Schriftdateien aufteilt (DRM, höhöhö) oder Opera Mini nicht mehr als einen Stil pro Schriftfamilie akzeptiert, kann dieses Problem nicht gelöst werden.
Übrigens: Die Desktop-Version von Opera (zumindest hier unter Ubuntu 12.04) zeigt auch die falsche Schriftart für den Grundtext an. Nach dem Laden verwendet sie fett kursiv (von Whitney?), nach dem Klicken auf einen Link und dem Zurückkommen ist die Schrift fett und kleiner, verwendet aber die gleiche Abstände wie zuvor. Katastrophal.
Normalerweise sehe ich die Seite in einem Desktop-Browser, aber im Moment benutze ich Feedly auf einem Android-Telefon und die Schriftarten sind ebenfalls hakelig. Kein großes Problem, aber ich bin neugierig, was Feedly zum Anzeigen von Websites verwendet.
Es ist schön, Einblick in das Denken eines Entwicklers zu bekommen, den ich respektiere. Ich dachte nur, jeder andere Entwickler wüsste sofort die Antwort auf alles. Puh!
Pure Qualität! Das ist wie ein Tagebuch meiner täglichen Kämpfe in der mobilen / Frontend-Entwicklung. Gut gemacht Chris… Sie haben meinen Tag erhellt.
Toller Beitrag, Leerraum ist immer gute Praxis, Überschriften in Ihren Beiträgen sind ebenfalls wichtig, danke für das Teilen des Wertes!
Schnelle 2 Cents dazu. Ich habe das Ressourcen-Panel untersucht und unter Schriftarten gab es anscheinend eine riesige Anzahl von Dateien, die für 1-2 Schriftarten geladen wurden. Cloud.typography teilt die Dateien auf und liefert die Zeichen entsprechend dem, was die Seite zuerst benötigt (noch nicht verifiziert, aber das scheint die Strategie zu sein). Wenn die Netzwerkverbindung also einige Dateien abbricht, erhalten Sie eine hakelige Darstellung. Ich weiß nicht wirklich, ob das mit einem JS-Test behoben werden kann, der erkennt, welche Zeichen geladen wurden und welche nicht. Tut mir leid, aber ich bin schlecht in JS :)
Hallo Chris, haben Sie in Erwägung gezogen, einen Remote-Debugger wie Weinre zu verwenden? Mir kam der Gedanke, dass dies sehr nützlich gewesen wäre (es ist täglich für mich) und eine schnelle Suche auf der Seite hat noch niemanden gezeigt, der es erwähnt hat. Es ist ein großartiges Werkzeug für mobile Tests.
Dies ist einer der vielen vielen Gründe, warum Webfonts keine gute Sache sind. Benutzern ist eine LEICHT hübschere Schriftart egal. Sie kümmern sich um Lesbarkeit und Geschwindigkeit. (Das erfinde ich nicht. Studien belegen das.)
Dieser Vulkan-Teil war großartig xD
Vielen Dank, dass Sie den Opera Emulator erwähnt haben, ich wusste nicht, dass sie einen haben!!
Wenn Sie sich nicht die Mühe machen wollen, das herauszufinden, melden Sie das Problem an CodePen und warten Sie dann ab, was sie zur Behebung tun. ;-) (Was nur frecher ist als die wahrscheinlich richtige Antwort: Ping Cloud Typography Support.)
Auch das tritt auf meiner Website auf, wenn ich sie in Qt Webkit ansehe, bluebook.io, das Cloud.typography verwendet. Würde gerne wissen, ob Sie es beheben.