Встраивание @font-face в iOS 3.0–4.1

вот пример моего CSS (который работает в iOS 4.2), но не работает в более ранних версиях iOS ‹4.1)

/**** CSS3 Font embedding ****/
@font-face {
font-family: 'ChevinLight';
src: url('./uploads/fonts/chevilig-webfont.eot');
src: url('./uploads/fonts/chevilig-webfont.ttf') format('truetype'), url('./uploads/fonts/chevilig-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'ChevinBold';
src: url('./uploads/fonts/chevibol-webfont.eot');
src: url('./uploads/fonts/chevibol-webfont.ttf') format('truetype'), url('./uploads/fonts/chevibol-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}


body {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
background: #009933;
padding: 0 10px 0 10px;
}


/****** ELEMENTS *****/
h1, h2 {
text-transform: uppercase;
color: #FFFFFF;
}
h1 {
font-family: 'ChevinBold', Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0 0 5px 0;
font-weight: normal;
line-height: 1px;
}
h2 {
font-family: 'ChevinLight', Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 6px 0 5px 0;
font-weight: normal;
line-height: 1px;
}
p {
font-family: 'ChevinLight', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
color: #FFFFFF;
}

Я не могу разработать (или найти) способ встраивания шрифтов в эти более ранние версии Safari в этих версиях iOS.

Пожалуйста, кто-нибудь может помочь?

Спасибо.


ios css mobile-safari font-face ios4
person Karlgoldstraw    schedule 25.01.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

На шрифты SVG нужно ссылаться следующим образом:

@font-face {
    font-family: 'KomikaHandRegular';
    src: url('Komika_Hand-webfont.ttf') format('truetype'),
         url('Komika_Hand-webfont.svg#webfontATHY6trD') format('svg');
    font-weight: normal;
    font-style: normal;
}

...где #webfontATHY6trD — это идентификатор шрифта в файле SVG. Это должно выглядеть примерно так (просто откройте его в текстовом редакторе):

font id="webfontATHY6trD" horiz-adv-x="1259"
person Mark G.    schedule 07.02.2011

arrow_upward
0
arrow_downward

Старые версии сафари принимают шрифт только в формате svg. Используйте онлайн-конвертер шрифтов, например, font squirrel, для создания шрифтов в этом формате.

person Marco Luglio    schedule 04.01.2012