Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zewnętrzna czcionka i pozycja pionowa tekstu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
pp-layouts
Witam.

Mam problem który doprowadza mnie do szału:

Dostałem od grafika layout, który używa specjalnej czcionki. To żaden problem, jest @font-face, robiłem to 100x i zawsze działało.
Tyle, że napisy muszą być dość dokładnie wyrównane z innymi elementami - szczególnie w pionie (mają znajdować się na środku przeznaczonej dla nich belki).

Robiłem to pod Linuxem. Ustawiłem na oko, podglądając na Google Chrome. Super, działa.

Odpalam pod Operą. Jest git. Odpalam pod FireFoxem - masakra - raz - czcionka wygląda ohydnie (rozwalony hinting), dwa - jest 2 pixle niżej. Kolejna niespodzianka - odpalam ten layout pod Windowsem 7 - i pod każdą przeglądarką mam inną pozycję czcionki w pionie - rozrzut jakieś 4px. Nie - nie mogę tego tak zostawić, bo layout wygląda przez to jak kupa w lesie, a takiej lipy klientom nie oddaję.

Pytanie - skąd te potworne różnice w wyświetlaniu czcionek?
Czy da się coś zrobić, żeby zmusić przeglądarki, żeby wyświetlały czcionki chociaż w tym samym miejscu?

Pozycję ustawiam w typie absolute, względem lewego górnego rogu boxa w którym jest napis.

Wygląda to mniej więcej tak:

Kod
.txt {
  position: absolute;
  left: 10px;
  top: 5px;
  font-family: "Ext Font X", sans-serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 17px;
  color: #fff;
}


OK, czy ktoś miał taki problem i go rozwiązał? Mam taki plan, żeby stworzyć tabelkę przesunięć w pionie dla wszystkich przelgądarek pod Windowsem i Linuxem, następnie napisać funkcję która poprzesuwa teksty zgodnie z tą tabelką. Obawiam się jednak, że to taki brzydki hack jest, zadziała tylko dla tych przeglądarek, w których to przetestuję - w innych nadal będzie się rozjeżdżać. Nie mówiąc już, że masa roboty będzie ze zrobieniem samej tabelki. I jeszcze jedno - jak już to jakoś wyrównam dla jednej czcionki - nie wiem czy dla innych czcionek przesunięcia nie będą inne. Nawet nie wiem, czy są one bezwzględne (w pixlach), czy względne, a jeśli względne, to względem czego - rozmiaru czcionki w pixlach? Rozmiaru linii? Jakiegoś innego niewidzialnego wymiaru? Może jest jakaś magiczna właściwość css do tego? Vertical-align nie działa smile.gif

Jak ktoś ma lepszy pomysł niż hack w JS (albo zna gotowy, dobry hack w JS), będę wdzięczny za pomoc.

PS: Problem nie dotyczy IE, bo dla IE i tak mam osobny arkusz i czcionkę w innym pliku. Raz ustawię i gra, problem jest z różnicą w położeniu pionowym pomiędzy Chrome, FireFox i Operą pod Linuxem i Windows 7. Różnice występują pomiędzy różnymi przeglądarkami, a także między tą samą przeglądarką w różnych systemach. Tak - wiem, że można tekst na obrazki podmienić - tylko tych nagłówków mam dużo i klient chce mieć możliwość ich zmiany - dlatego zależy mi jednak na tekście.
toaspzoo
Cytat
font-weight: normal;
line-height: 17px;


Bez przesady, każda przeglądarka to widzi inaczej, zależnie od domyślnych ustawień.

Ażeby css'a czytało tylko IE dajesz przed parametrem "_", czyli np.
Kod
margin: 5px; // czytają wszystkie

_margin: 5px //czyta TYLKO IE i nadpisuje poprzednie
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.