Использование CSS @ font-face с iPad / iPhone

Question

Я пытаюсь использовать атрибут font-face CSS с пользовательским шрифтом:

@font-face {
   font-family: "Handvetica";
   src: url("Handvetica.eot"); 
   src: url("Handvetica.ttf") format("truetype"),
     url("Handvetica.otf") format("opentype"), 
     url("Handvetica.woff") format("woff"),
     url("Handvetica.svg#Handvetica") format("svg");
}

работает на ff, safari & chrome корректно.

несколько сайтов в сети заявляют, что для использования font-face на устройствах iOs (iPod / iPhone / iPad) необходим шрифт svg шрифты были конвертированы с использованием https://onlinefontconverter.com,, и у меня есть все форматы.

шрифт svg не отображается на iOs. Кто-нибудь знает, как заставить это работать? Кроме того, каков правильный синтаксис для # в объявлении svg url? что это означает?

Спасибо.

Answer 1

Это старый вопрос, но я полагал, что никто еще не ответил на него, и у меня была такая же проблема ранее.

# в после URL SVG обозначает идентификатор шрифта SVG, и он не будет работатьесли строка после # не совпадает с идентификатором шрифта SVG.Если вы откроете файл SVG, вы увидите такой тег:

<font id="webfontSRj8j0PE" horiz-adv-x="1058" >

Это для шрифта BEBAS, но если бы он был для вашего шрифта Handvetica, например, вам нужно было бы ввестив url("Handvetica.svg#webfontSRj8j0P") format("svg")

Answer 2

это может быть конвертер, который вы используете - или, возможно, кеширование iPad. Лучший шрифт в мире:

http://www.fontsquirrel.com/

генерирует правильный набор шрифтов, предоставляет вам набор шрифтов - вы можете отправить ему свой собственный шрифт (если позволяет лицензия), и он создаст для вас набор шрифтов. Это включает TTF, Woof, SVG, OTF.

Сжатие целиком, CSS, шрифты, пример, и вы скачиваете его.

Всегда работал для меня.

Answer 3

Я использовал FontAwesome и у меня была такая же проблема.Проблема в том, что идентификатор .svg # не соответствует тому, что на самом деле находится в файле .svg.

В файле вы увидите: <font id="FontAwesomeRegular" horiz-adv-x="1843" >

Чтобы иконки не отображались в виде квадратов, измените эту строку в файле font-awesome.css

Изменениеэта строка:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

к этой строке

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 4

TransType, специализированный инструмент для преобразования форматов шрифтов, также может создавать файлы веб-шрифтов @font одним щелчком мыши. В отличие от fontsquirrel это работает как для латинских, так и нелатинских шрифтов, таких как арабский. http://www.fontlab.com/font-converter/transtype/ Однако страницы, использующие эти шрифты @, похоже, работают в настольных браузерах и ipad ios8, но не на iphone ioS8

Answer 5

Кроме того, каков правильный синтаксис для # в объявлении svg url?что это означает?

Это ссылка на определенный элемент <font> или <font-face> в данном файле.Вы можете иметь любое количество svg fonts / font-face внутри одного и того же файла svg, даже если чаще всего есть только один.

Answer 6

Может быть сервер.Чтобы SVG работал, вам иногда нужно настроить тип пантомимы SVG:

 image/svg+xml