Actualmente estoy trabajando en una extensión de Chrome que me permite descargar los archivos de fuentes que se han utilizado en una página web.
Mientras analizaba las fuentes de este sitio , me encontré con un caso extraño para una de las URL de fuentes.
Para la fuente Freddy , la regla @font-face se ve así:
@font-face { font-family: 'Freddy'; src: url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/freddy_regular_2-webfont.woff?v=147712666987587936441646682936") format("woff") , url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/Freddy_Regular_2.ttf?v=64870238297763773461646682938") format("truetype") , url("//cdn.shopify.com/s/files/1/0548/8708/8184/t/24/assets/freddy_regular_2-webfont.woff2?v=66678714148373221751646682937") format("woff2"); /* Safari, Android, iOS */}Esto rompió mi script porque la doble barra invertida lo convierte en una URL no válida (es decir, si lo escribo en el navegador tal como está, me dará un error).
Entonces, me preguntaba: ¿cuál es el propósito de las barras dobles al comienzo de esta URL? ¿Cómo recupera esto realmente la fuente si parece ser una URL no válida?
Al hacer referencia a contenido en otro dominio, comenzar una URL con dos barras en lugar del protocolo http o https le dice al navegador que solicite el contenido de la URL utilizando el mismo protocolo que la página de origen (para evitar contenido mixto ).
Estas URL no están destinadas a escribirse en una barra de direcciones, por lo que parecen ser una URL no válida cuando intenta navegar directamente a ella.