@font-face jest przestarzały w wersji Safari na iPhone'a. Jakie są moje alternatywy?

Według dokumentacji Apple, @ font-face jest przestarzały do ​​użytku w wersji Safari na iPhone'a. iPhone zawiera tylko 11 czcionek, AFAIK, a w każdym razie potrzebuję ładnego blacklettera czcionka dla aplikacji, którą tworzę. Będę generował losowy tekst, więc obrazy nie są opcją. Jakie mam alternatywy? Czy utknąłem z rozwiązaniem JavaScript takim jak Cufón?


iphone css safari webkit font-face
person Andrew Hedges    schedule 19.07.2009    source źródło

Odpowiedzi (4)


arrow_upward
18
arrow_downward

Cóż, właśnie się dowiedziałem, że @font-face jest TERAZ obsługiwane na obecnym iPhonie i iPadzie. Dokumentacja powiązana z powyższym, która jest Safari CSS Odniesienie Pokazuje przykład, jak osadzić czcionkę.

@font-face {
    font-family: "MyFamilyname", cursive [, ...];
    font-style: normal [, ...];
    font-variant: normal[, ...];
    font-weight: bold[, ...];
    font-stretch: condensed[, ...]; /* Not supported */
    font-size: 12pt;[, ...] /* Not supported */
    src: local("Font Family Name"),
        url(http://..../fontfile.ttf) format("truetype"),
        url(http://..../fontfile.ttf) [, ...];
}

Chciałem się tylko upewnić, że ktoś inny, kto przyszedł i przeczytał to tak jak ja, znał obecny stan.

person christophercotton    schedule 20.04.2011
comment
Jeśli chcę przechowywać pliki czcionek w aplikacji, aby nie było potrzebne połączenie internetowe, aby załadować czcionki, co umieściłbym w parametrze adresu URL czcionki? Proszę o pomoc z moim pytaniem o czcionkę tutaj (mój plik html, który używa czcionki, znajduje się w moim katalogu dokumentów, a same pliki czcionek znajdują się w moim pakiecie (folder zasobów): stackoverflow.com/questions/9014211/ - person Albert Renshaw; 26.01.2012

arrow_upward
17
arrow_downward

Właściwie możesz użyć @font-face. Wystarczy użyć czcionek SVG. Istnieją narzędzia do konwersji plików TTF do SVG

Zobacz to, aby uzyskać więcej informacji (nie mój post)

http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

person mikelikespie    schedule 28.01.2010
comment
Wspaniały post. To świetne rozwiązanie, dzięki któremu @font-face działa we wszystkich głównych przeglądarkach. - person samvermette; 07.02.2010
comment
W ten sposób poszedłem. Myślę, że jest to lepsze niż osobiście Cufon, ponieważ działa po wyjęciu z pudełka i musi jakoś obsługiwać GPU. Dziękuję! - person Paul Shapiro; 28.06.2010
comment
Problem z obsługą wsteczną polega na tym, że Safari 3 nie obsługuje SVG, chociaż obsługuje czcionki OTF. - person vernonk; 13.01.2011

arrow_upward
3
arrow_downward

Cufón to naprawdę jedyne rozwiązanie, z którego będziesz mógł skorzystać po wyjęciu z pudełka. Dodatkową zaletą jest to, że jest dość szybki na iPhonie, ponieważ używa płótna zamiast wbudowanego SVG, a generowane czcionki są zwykle około 60-80% mniejsze niż oryginalne czcionki (po skompresowaniu).

person Nathan de Vries    schedule 19.07.2009
comment
Używałem Cufón wcześniej i podoba mi się. Chcę pokazać serię liczb w krótkich odstępach czasu i nie sądzę, aby Cufón mógł zmienić tekst po jego przekonwertowaniu. - person Andrew Hedges; 20.07.2009
comment
Wywołanie Cufon.refresh(selector) natychmiast po ustawieniu innerHTML elementu Cufon'd na inną wartość działa dobrze -- na moim pulpicie nie ma zauważalnego migotania, ale musisz przetestować na urządzeniu mobilnym, aby sprawdzić, czy działa zmiana wystarczająco szybka. - person Nathan de Vries; 20.07.2009
comment
Ah, tak. Nie wiedziałem, że możesz to zrobić w Cufón. Dziękuję! - person Andrew Hedges; 21.07.2009
comment
Jeśli używam go tylko do lepszej dekoracji, uważam, że rozwiązanie SVG jest lepsze, ponieważ ma tę zaletę, że zachowuje się jak tekst. - person mikelikespie; 16.01.2011

arrow_upward
0
arrow_downward

Będę generował losowy tekst, więc obrazy nie są opcją.

Możesz użyć biblioteki graficznej na serwerze i rysować obrazy w locie. Zrobiłem coś podobnego i działa, ale oczywiście zależy to od ilości tekstu, który chcesz narysować. Dodatkowo, jeśli tekst przynajmniej się powtarza, możesz buforować obrazy.

person zoul    schedule 19.07.2009
comment
Muszę pokazywać liczby losowe w krótkim odstępie czasu iw zakresie od około -10k do 10k. Za dużo do buforowania. Może muszę pokazać kombinacje obrazków poszczególnych liczb, 0-9. - person Andrew Hedges; 20.07.2009
comment
W przypadku liczb użyłbym sprite'ów CSS: wygeneruj jeden plik PNG z -0123456789, a następnie umieść każdą cyfrę jako tło w div o stałym rozmiarze. Po prostu zmień przesunięcie pionowe, aby zmienić cyfrę pojawiającą się w każdym gnieździe. Przyjemny i szybki, prosty obiekt do pobrania przez HTTP, który będzie następnie buforowany przez cały czas, i bez dodatkowego obciążenia serwera poza obsługą jednego statycznego obrazu. - person James Sutherland; 20.05.2010