Jak ustawić renderowanie czcionek w ten sam sposób w różnych przeglądarkach internetowych?

11

Tworzę stronę internetową dla klienta i mieliśmy nadzieję na użycie zwykłego tekstu, a nie obrazów na pasku nawigacyjnym. Czcionka, której używamy, to Century Gothic (uważam, że ta czcionka jest dostępna na większości komputerów PC i Mac). Problem polega na tym, że w różnych przeglądarkach czcionki znacznie się różnią. W Chrome wyglądamy tak, jak chcemy, ale w Firefoxie tekst jest mniejszy i wyraźniejszy.

Oprócz pisania javascript dla przeglądarki w celu zmiany właściwości czcionek, istnieją inne opcje ujednolicenia sposobu renderowania czcionek w różnych przeglądarkach. Być może jakieś biblioteki lub API? Może chodzi o bardziej szczegółowe określenie właściwości czcionek? Szczerze mówiąc utknąłem i potrzebuję pomocy.

website-design fonts cross-browser Zach Lysobey
źródło

Odpowiedzi:

13

Nie dostaniesz czcionek i innych rzeczy, które będą renderowane identycznie w różnych przeglądarkach. Obsługa czcionek jest doskonałym przykładem. Wiem, że Safari w systemie Windows z jakiegoś powodu lubi pogrubić tekst. Niestety tak działa sieć. Różnorodność przeglądarek, systemów operacyjnych, monitorów, procesorów graficznych itp. Oznacza, że ​​istnieje potencjalnie tysiące lub dziesiątki tysięcy różnych sposobów przeglądania strony internetowej. Więc budując dla wbe, musisz to zrobić, wiedząc i oczekując, że twoja strona nie będzie idealna dla wszystkich. To nie jest druk. To dzika dzika sieć.

John Conde
źródło
Tak, wygląda na to, że to niefortunna rzeczywistość. Wydaje się jednak, że ktoś powinien napisać fragment języka javaScript, który przybliżyłby go do normalizacji.
Zach Lysobey
Niestety nie jest to problem z kodem, ale problem z oprogramowaniem i sprzętem. To, w jaki sposób rozwijane są przeglądarki, a wraz ze zbliżającym się przyspieszeniem sprzętowym będzie gorzej (chociaż twoje czcionki będą gładsze dla tych, którzy go włączyli).
John Conde
1
W tym artykule (i innych w tej samej serii) szczegółowo wyjaśniono problemy, jeśli jesteś ciekawy. blog.typekit.com/2010/12/17/…
paulmorriss
Wybierz najlepszą odpowiedź. Mówisz, że to nie jest problem z kodem, ale na pewno ktoś mógłby napisać kod, tak aby pojedynczy wiersz tekstu był rozciągnięty do minimalnej szerokości w pikselach. To samo znacznie poprawiłoby tę sytuację. Może przetestować renderowaną szerokość <p> i odpowiednio zwiększyć odstępy między literami. Może?
Zach Lysobey
@Zach - Na pewno możesz pokonać wiele przeszkód dzięki planowaniu i inteligentnemu kodowaniu. Ale w końcu możemy mieć tylko tyle kontroli. Zasadniczo, jeśli możesz zaakceptować problemy takie jak Safari w systemie Windows i kodować resztę, powinieneś dobrze.
John Conde
1

W rzeczywistości istnieje metoda osadzania czcionek w CSS. To bardzo proste. Więcej informacji na ten temat można znaleźć na stronie http://randsco.com/index.php/2009/07/04/p680 . Wadą tego jest to, że starsze przeglądarki (pre ei 7 i ff 3 myślę ...) nie obsługują tego. Ale liczba osób korzystających z tych starych przeglądarek szybko maleje i nadal można określić alternatywne czcionki, które będą działać i zwykle są dostępne na większości komputerów na wszelki wypadek.

Inne podejście, którego nie użyłem, polega na użyciu flasha. Nie mam na ten temat wiele innych informacji, niż wiem.

Kenneth
źródło
W notatce css pamiętaj, aby używać tylko czcionek, które nie będą naruszały praw autorskich, jeśli ta czcionka zostanie przejęta przez kogoś innego, ponieważ podczas korzystania z metody css plik czcionek jest dostępny dla wszystkich, którzy mogą uzyskać dostęp do Twojej witryny.
Kenneth
Ta metoda Flash nosi nazwę sIFR . Ma to również zalety i wady.
John Conde
Jak wspomniano w drugiej odpowiedzi, nawet przy takim podejściu będą niewielkie różnice między przeglądarkami i systemami, ale są pewne rzeczy, które możesz zrobić z resztą projektu witryny, które mogą zrekompensować i sprawić, że strona będzie dobrze renderowana we wszystkich różnych konfiguracjach. Jedną z kluczowych rzeczy jest posiadanie wielu przeglądarek i najlepiej systemów operacyjnych do testowania twoich witryn.
Kenneth
1

Jak zauważyli już inni, nie mamy pełnej kontroli. Ale myślę, że warto wspomnieć o kilku rzeczach, które uważam za pomocne w zachęcaniu przeglądarek do renderowania ogólnie podobnych rzeczy. Oba są rzeczami „z powrotem do podstaw”, które wielu z was już robi, ale pomyślałem, że warto o nich wspomnieć, ponieważ fundament, na którym budujesz, często stawia cię na sukces lub porażkę ...

Reset CSS. Koncepcja jest prosta: ustawiasz domyślne znaczniki HTML w arkuszu stylów, aby ustawić wspólny punkt początkowy renderowania HTML. Oto artykuł i przykład: http://meyerweb.com/eric/tools/css/reset/

Deklaracja Doctype. http://htmlhelp.com/tools/validator/doctype.html

ph33nyx
źródło