html - tamaño - tipo de letra en css
Cuestiones de tipo de letra entre dominios (4)
Actualmente, es probable que el servicio de fuentes web de AWS no funcione en Firefox e IE 9+ porque AWS no es compatible con Access-Control-Origin-Header. Vea esta post en los foros de AWS. Parece ser un problema para mucha gente.
Actualización 7/17/12:
Como alternativa a AWS, los servicios en la nube de Google admiten el servicio de archivos de origen cruzado. Acabo de configurar un cubo para servir fuentes web, y parece estar funcionando. Vea esta publicación de blog y la documentation para más información.
por favor lea todo esto antes de comentar.
Actualmente estoy trabajando en un sitio web grande que está alojado en Amazon Web Services (AWS). Esto nos permite utilizar funciones de escalabilidad en situaciones en las que el sitio web puede tener una gran carga de tráfico.
Originalmente, comenzamos separando el código del sitio web con una combinación de HTML / PHP / Java, etc. y tenemos activos estáticos en un servidor separado. Cuando probé por primera vez el uso de font-face en esta configuración, encontré que Firefox e IE no cargarían la fuente, y rápidamente descubrí que se trataba de un problema de dominio cruzado. Hay una variedad de soluciones para esto, que incluyen la modificación de encabezados para permitir el acceso a los archivos de fuentes. Sin embargo, el sistema de almacenamiento que estamos usando no permite este tipo de modificación de encabezado.
En un intento por ver si podía conseguir que las fuentes funcionaran en todos los navegadores, las moví y el archivo CSS que las llama al mismo dominio que el sitio web. Sin embargo, todavía no parecen cargarse en Firefox o IE. Si copio el código y lo ejecuto localmente en mis documentos, todo parece estar bien en todos los navegadores (por lo que los archivos no pueden estar dañados). Firefox definitivamente está encontrando los archivos, ya que puedo verlos cargados a través de FireBug.
He revisado todas las URL para asegurarme de que sean correctas y se resuelvan donde deberían.
Aquí está la fuente tipográfica CSS que estoy usando con el truco sonriente:
@font-face {
font-family : "AllerRegular";
src : url(''aller_rg-webfont.eot'');
src : local(''☺''),
url(''aller_rg-webfont.woff'') format(''woff''),
url(''aller_rg-webfont.ttf'') format(''truetype''),
url(''aller_rg-webfont.svg#webfontooYDBZYS'') format(''svg'');
font-weight : normal;
font-style : normal;
}
El archivo CSS se encuentra en el mismo directorio que las fuentes.
También tengo los tipos MIME establecidos en un archivo .htaccess que se encuentra en la misma carpeta que las fuentes.
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "/.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Si tienes alguna idea por favor sugerir.
Llevo unos días buscando en la web, pero todas las soluciones me han fallado.
Es posible que deba agregar soporte para los tipos MIME en el nuevo entorno de alojamiento.
Echa un vistazo a:
Esto es posible utilizando S3 sin Cloudfront agregando la siguiente configuración de CORS.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
Intenta hacer esto:
En su servidor necesitará agregar:
Access-Control-Allow-Origin
Al encabezado de los archivos de fuentes, por ejemplo, si está utilizando Apache, puede agregar esto a .htaccess:
<FilesMatch "/.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Mi problema se resolvió con este método.