Z jakiegoś powodu, w moim Firefox 12.0 dla Mac OS X, moje znaki ⟩ (&rang;) są znacznie większe niż powinny być. W Chrome i Safari wyglądają dokładnie tak, jak chcę.Niektóre jednostki znaków HTML są OGROMNE w Firefoksie Tylko

mam AddDefaultCharset utf-8 w moim .htaccess jak również <meta charset="utf-8"> w moich <head> (jako grupa ja dostarczających tych plików, nie może korzystać z mojego .htaccess).

Ponadto, zgodnie z Adobe Browser Lab, IE 7 i 8 pokazują tylko kwadratowe pudełko ... Czy jest ktoś, komu mogę uzyskać te przeglądarki, aby wesprzeć tę postać? Sprawiłoby to o wiele łatwiejsze (ponieważ kolory będą się zmieniać, więc obrazy są bardzo niewygodne i żaden kolor nie blednie z obrazami).

Demo: http://cameronspear.com/demos/rang/

To co widzę w Chrome i oczekują:

Chrome

To właśnie mój Firefox jest pokazane:

Firefox

ten to zrzut ekranu z Browser Labs of IE8:

IE8

TL; DR: chcę wszystkie te screeny wyglądać pierwszym użyciem ⟩ aka &rang; znaków. Używanie JavaScript byłoby nawet dopuszczalne.

Dzięki.

[edytuj] Powinienem zaznaczyć, że nie jest to tak ważne, że mam postać &rang;, ponieważ jestem w stanie zmienić jej kolor za pomocą CSS i mieć taki sam wygląd w wielu przeglądarkach.

Rozwiązanie

Chciałem tylko podzielić się dokładnie to, co zrobiłem dla dobra potomności za.

Dzięki wskazówkom i zasobom firmy Pointy utworzyłem własny SVG z Inkscape za pomocą szablonu i metod opisanych w "How to make your own icon webfont". Zmapowałem duży wspornik kątowy na X, a mały na x.

Jedną rzeczą, na którą natrafiłem, było to, że mój kąt musi dotykać linii bazowej i wynosić tylko 72% drogi do góry pudełka, aby pasował "w linii", więc kapitał X był moim oryginalnym zbyt wysokim, a małe litery x były bardziej liniowe.

I następnie konwertowane mój SVG do TTF z http://www.freefontconverter.com/ i przekształcony w webfont z http://www.fontsquirrel.com/fontface/generator

... i to było to.

Demo (http://cameronspear.com/demos/rang/) nadal działa. Możesz zobaczyć, że wygląda on spójnie we wszystkich przeglądarkach i animacja obrotu onclick jest zbliżona do punktu itp.

[Aktualizacja] Znalazłem wielki zasób nazywany IcoMoon że pomaga na co czcionek i organizowania czcionek w internecie, i akceptuje regularne wektory svg, aby można było go w programie Illustrator, a nie bałagan z Inkscape od IcoMoon uchwyty mapowanie klawiatury i takie tam. Możesz wyeksportować tylko ikony, których używasz, więc załadujesz tylko 3 lub 4 ikony, jeśli to wszystko, czego potrzebujesz, a nie całą czcionkę.

Stało się to nieocenionym źródłem informacji i polecam wszystkim, którzy chcą dostać się do Fontów ikon, sprawdź to. Możesz dowiedzieć się więcej o całym procesie od CSS-Trick's 113th Screencast.

Źródło

2012-06-04 CWSpear

Wyglądają dobrze dla mnie w FireFox. Jeśli chodzi o IE, niewiele może zdziałać, tworząc własną czcionkę ikonową (co nie jest * tak * trudne, a ponadto masz pełną kontrolę nad grafiką). – Pointy

Są to kwadratowe pudełka dla mnie, nawet w chromie – Esailija

Dostaję kwadraty w Chrome 21.0.1155.2 dev-m, ale może to błąd kanału dewelopera? http://i.imgur.com/NU6qT.png – mayhewr

Tworzenie czcionki ikonki jest na tyle łatwe, że mogę to zrobić, chociaż (dla mnie) proces jest nieco tajemniczy. Podejrzewam, że jest wielu prawdziwych grafików, którzy są w tym lepsi iz pewnością wielu rozumie szczegóły techniczne bardziej niż ja.

Here to dość dokładny wpis na blogu na ten temat. (Not mny blog.) Najważniejszą rzeczą, której nie opisuje zbyt dobrze, jest związek między obszarem "art board" Inkscape a pionowym pozycjonowaniem każdego glifu w kroju. Wchodzi w szczegóły, ale nigdy nie udało mi się tego rozgryźć.

To, co zrobiłem, to po prostu zrobić kwadratowy obszar roboczy z 1024 pikselami na boku. Następnie skonfigurowałem siatkę w Inkscape, tak aby plansza została podzielona na siatkę 16x16. To sprawia, że (nieco) łatwo jest zaprojektować znaki, które będą ładnie wyglądać przy rozmiarze 16 pikseli. (Oczywiście możesz wybrać inny rozmiar czcionki, jeśli chcesz, 16 x 16 jest dobre dla rzeczy, które muszą być całkiem małe). Następnie upewniam się, że po umieszczeniu glifów na stronie są one w 1em by 1em box (lub 16px o 16px, jednak chcesz to zrobić w swoim CSS) bez dopełnienia. Używam tagów <i> i podaję je display: inline-block. To daje mi dużą elastyczność i ogólnie działa świetnie.

Narzędzie czcionek Inkscape SVG jest, delikatnie mówiąc, całkiem surowe. To dosłownie wynik czyjegoś letniego projektu. Działa, ale niewiele więcej niż ledwie. Często zapisuj.

Teraz proces generowania plików czcionek jest nieco szalony. Używam FontSquirrel. Przesyłam plik .svg zapisany z Inksccape, a następnie poproszę o EOT, WOFF i TTF. O dziwo, działa.

Jeśli potrzebujesz tylko kilku glifów, jest to całkiem słodka droga, ponieważ będziesz mieć mały plik czcionek do pobrania i będzie on buforowany przez przeglądarkę. Istnieją jednak pewne problemy z dostępnością, a praktyka jest wystarczająco kontrowersyjna, że niektórzy bardziej fanatyczni członkowie społeczności mogą uznać cię za barbarzyńcę za to :-)

Źródło

2012-06-04 18:40:47 Pointy

Wygląda dobrze! Będę musiał dać temu popołudniu i dam ci znać. Bardzo dziękuję za ten zapis i zasoby. – CWSpear

Cóż ... Ssałem w wektoryzacji, ale to było zdecydowanie rozwiązanie! Na szczęście był to taki prosty symbol. – CWSpear

Czy potrafisz używać obrazów? Zapewnią spójny wygląd we wszystkich przeglądarkach. W wielu przypadkach zdjęcia są lepsze od symboli.

Źródło

2012-06-04 18:18:05 kevin628

Czcionka ikony zapewnia spójny wygląd we wszystkich przeglądarkach. – Pointy

@Pointy To też by działało! :) – kevin628

Normalnie zgadzam się, po prostu wiem, że kolory będą się zmieniać, a ja nie chcę aktualizować ikon za każdym razem. Jestem programistą, chcę być poza Photoshopem tak bardzo, jak to możliwe. W pewnym momencie, kiedy rozmyślaliśmy stany, i gdy wrócimy do tego, byłoby miło, gdyby strzałka również zmieniała kolory, a nie tylko natychmiast zmieniła się na biały/czarny, wiesz? – CWSpear

To jest problem z czcionką. Aby zmaksymalizować prawdopodobieństwo rzucenia rzadkiego znaku (takiego, który nie występuje w większości czcionek), należy określić maksymalną listę czcionek, które wszystkie zawierają.

Strona ma teraz tylko font-family: Arial,sans-serif ustawiona na elementach span, które zawierają wspornik. Ponieważ Arial go nie zawiera, każda przeglądarka będzie używać własnej definicji dla sans-serif. Jeśli mapowana mapa nie zawiera nawiasu, sprytne przeglądarki wypróbowują coś sprytnego, np. Skanując inne czcionki w systemie, ale może to spowodować brak jakiegokolwiek glifu.

Dodatkowy problem.Zwykle nie ma znaczenia, że używasz odwołań do encji, takich jak &rang; zamiast samej postaci, ale tutaj to robi. Według HTML 4.01, &rang; oznacza U + 232A; przez wersje robocze HTML5, to znaczy U + 27E9. IE wyświetla tutaj HTML 4.01, podczas gdy Firefox używa definicji HTML5. Więc lepiej jest użyć postaci, którą naprawdę chcesz, albo jako kodowanie UTF-8, albo jako znak odniesienia 〉.

Jeśli możesz sprawdzić np. font coverage for U+232A i zapisz czcionki w kolejności preferencji. Ale powinieneś sprawdzić, czy wszystkie czcionki dają akceptowalną prezentację. Na przykład, jeśli zostanie użyta funkcja Cambria Math, domyślna wysokość linii będzie bardzo duża, więc prawdopodobnie chcesz ustawić jawnie line-height na pewną rozsądną wartość, taką jak 1.3.

Wreszcie - i być może należało to zadać na samym początku - czy na pewno chcesz użyć PRAWEGO POŁOŻENIA KĄTA WAHLIWEGO lub MATEMATYCZNEGO PRAWEGO WSPORNIKA KĄTOWEGO? Są to nawiasy, używane jako sparowane z nawiasami lewymi, a nie ze strzałkami.

Niektóre dodatkowe informacje: Guide to using special characters in HTML.

Źródło

2012-06-04 19:58:33

Chcę dać ci poważne rekwizyty na wszystkie wnikliwe informacje na temat kodowania znaków i czcionek. Wiele się nauczyłem, jak stosować to rozwiązanie, ale nie dość, że mnie tam dostałem, dlatego właśnie Pointy sprawdza znacznik wyboru. Dziękuję za wszystkie świetne informacje! – CWSpear

Niektóre jednostki znaków HTML są OGROMNE w Firefoksie Tylko

Rozwiązanie

Odpowiedz

Powiązane problemy