El uso de CSS @ font-face con el iPad/iPhone

Question

Estoy tratando de utilizar el atributo font-face de CSS con una fuente personalizada:

@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"); 
} 

funciona en FF, Safari & cromo correctamente.

varios sitios en la web indican que para usar font-face en dispositivos iOs (iPod/iPhone/iPad) se necesita una fuente svg. las fuentes se convirtieron utilizando https://onlinefontconverter.com, y tengo todos los formatos.

la fuente svg no se muestra en iOs. ¿Alguien sabe cómo hacerlo funcionar? Además, ¿cuál es la sintaxis correcta para el # en la declaración svg url? ¿Que significa?

Gracias.

Answer 1

podría ser el convertidor de su uso, o tal vez el almacenamiento en caché del iPad. mejor sitio de la fuente en el mundo:

http://www.fontsquirrel.com/

genera el kit de letra correcta, le da un conjunto de fuentes - se puede enviar su propia fuente (licencia lo permite) y va a construir un tipo de letra kit para ti Esto incluye TTF, Woof, SVG, OTF.

Comprime todo, CSS, fuentes, ejemplo y lo descarga.

Siempre me ha funcionado.

Answer 2

Podría ser el servidor. Para el SVG para trabajar a veces es necesario el tipo mime SVG establecido:

image/svg+xml 

Answer 3

Ésta es una vieja pregunta, pero pensé que nadie respondió todavía y yo estaba teniendo el mismo problema anterior.

El # in después de la url SVG denota la ID de la fuente SVG, y no va a funcionar si la cadena después de # no coincide con la ID de la fuente SVG. Si abre el archivo SVG, verá una etiqueta como esta:

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

Esto es para la fuente bebas, pero si era para su fuente HandVetica por ejemplo, usted tendría que escribir en url("Handvetica.svg#webfontSRj8j0P") format("svg")

Answer 4

Además, ¿cuál es la sintaxis correcta para el # en la declaración svg url? ¿Qué significa?

Es la referencia a un elemento <font> o <font-face> en particular en el archivo dado. Puedes tener cualquier cantidad de fuentes svg/caras de fuentes dentro del mismo archivo svg, aunque es más común tener solo una.

Answer 5

Estaba usando FontAwesome y tuve el mismo problema. El problema es que el identificador .svg # no coincide con lo que realmente está en el archivo .svg.

En el archivo que va a ver: <font id="FontAwesomeRegular" horiz-adv-x="1843" >

para obtener sus iconos de no aparecer como cuadrados cambiar esta línea en la fuente-impresionante.css

Cambiar esta línea:

@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; 
} 

a esta línea

@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 6

Proceso de Conversión, una herramienta especializada para convertir formatos de fuente, también puede producir archivos en la web de la fuente @font con un solo clic. A diferencia de fontsquirrel, esto funciona tanto para fuentes latinas como no latinas, como el árabe. Sin embargo http://www.fontlab.com/font-converter/transtype/ páginas que utilizan estos @fonts parecen funcionar en los navegadores de escritorio y ios8 ipad, pero no en iPhones ioS8