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

Я пытаюсь использовать атрибут 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 правильно.

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

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

Спасибо.

Ответ 1

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

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

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

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

Ответ 2

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

http://www.fontsquirrel.com/

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

Замещает всю вещь, CSS, шрифты, пример и вы ее загружаете.

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

Ответ 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;
}

Ответ 4

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

 image/svg+xml

Ответ 5

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

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

Ответ 6

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