Mantén la atención porque en este escrito hallarás el resultado que buscas.Este escrito fue aprobado por nuestros expertos para garantizar la calidad y veracidad de nuestro contenido.
Solución:
Entonces, lo que debe hacer es… En la carpeta de archivos de fuentes, coloque un archivo htaccess con lo siguiente.
Header set Access-Control-Allow-Origin "*"
también en su archivo CSS remoto, la declaración de tipo de letra necesita la URL absoluta completa del archivo de fuente (no se necesita en los archivos CSS locales):
p.ej
@font-face
font-family: 'LeagueGothicRegular';
src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
url('http://www.example.com/css/fonts/League_Gothic.svg')
Eso solucionará el problema. Una cosa a tener en cuenta es que puede especificar exactamente qué dominios deben tener acceso a su fuente. En el htaccess anterior he especificado que todos pueden acceder a mi fuente con "*" sin embargo, puede limitarlo a:
Una sola URL:
Encabezado establecido Access-Control-Allow-Origin http://example.com
O una lista de URL delimitada por comas
Access-Control-Allow-Origin: http://site1.com,http://site2.com
(Los valores múltiples no son compatibles con las implementaciones actuales)
De acuerdo con los documentos oficiales, a los navegadores no les gusta cuando usas el
Access-Control-Allow-Origin: "*"
encabezado si también está utilizando el
Access-Control-Allow-Credentials: "true"
encabezamiento. En cambio, quieren que permitas su origen específicamente. Si aún desea permitir todos los orígenes, puede hacer un poco de magia Apache simple para que funcione (asegúrese de tener mod_headers activado):
Header set Access-Control-Allow-Origin "%HTTP_ORIGINe" env=HTTP_ORIGIN
Los navegadores están obligados a enviar el Origin encabezado en todas las solicitudes entre dominios. Los documentos establecen específicamente que debe hacer eco de este encabezado en el Access-Control-Allow-Origin encabezado si está aceptando/planeando aceptar la solicitud. eso es lo que esto Header está haciendo la directiva.
Desafortunadamente, la respuesta aceptada no funciona para mí, ya que los archivos CSS de mi sitio @importan los archivos CSS de fuente, y todos estos están almacenados en un CDN de Rackspace Cloud Files.
Dado que los encabezados de Apache nunca se generan (ya que mi CSS no está en Apache), tuve que hacer varias cosas:
- Vaya a la interfaz de usuario de Cloud Files y agregue un cabecera personalizada (Acceso-Control-Permitir-Origin con valor *) para cada archivo de fuente impresionante
- Cambie el tipo de contenido de los archivos woff y ttf a font/woff y font/ttf respectivamente
Vea si puede salirse con la suya con solo el n. ° 1, ya que el segundo requiere un poco de trabajo de línea de comando.
Para agregar el encabezado personalizado en el n.º 1:
- ver el contenedor de archivos en la nube para el archivo
- desplácese hacia abajo hasta el archivo
- haga clic en el icono de la rueda dentada
- haga clic en Editar encabezados
- seleccione Control de acceso-Permitir-Origen
- agregue el carácter único ‘*’ (sin las comillas)
- Pulsa Enter
- repetir para los otros archivos
Si necesita continuar y hacer el n. ° 2, necesitará una línea de comando con CURL
curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0
De los resultados devueltos, extraiga los valores para X-Auth-Token y X-Storage-Url
curl -X POST
-H "Content-Type: font/woff"
--header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff
curl -X POST
-H "Content-Type: font/ttf"
--header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf
Por supuesto, este proceso solo funciona si está utilizando Rackspace CDN. Otros CDN pueden ofrecer funciones similares para editar encabezados de objetos y cambiar tipos de contenido, por lo que tal vez tenga suerte (y publique información adicional aquí).
Reseñas y valoraciones del artículo
Tienes la opción de añadir valor a nuestro contenido informacional asistiendo con tu experiencia en los comentarios.