Блог

Как я могу написать длинные значения URI данных, завернутые в исходный код CSS? Например, длинная строка в кодировке base64 в data URI для font-face .

Когда я объявляю a font-face src с data помощью URI, URI, как правило, будет очень длинным:

 @font-face {
    font-family: "Lorem Ipsum";
    src:
        url("data:font/woff;base64,d09GRgABAAAABPcM[… hundreds of thousands of characters …]33q/4Poovx wA=")
        format("woff");
}
 

Поэтому я хочу написать это объявление с завернутыми строками в исходном коде CSS:

 @font-face {
    font-family: "Lorem Ipsum";
    src:
        url("data:font/woff;base64,
            d09GRgABAAAABPcMABMAAAAKJcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNA
            AABqAAAABoAAAAcc8H08EdERUYAAAHEAAABowAAAjiNwIfxR1BPUwAAA2gAADFuAA
            [… thousands of lines …]
            rKcZKeXKCXR5sVtJm6INVBiVyvJUNLm XH8vLelsoXSS kpvvRUxEfynmegQA/b1U
            Pt6xUXN4UTx13gFq66wR2weXzOgM33q/4Poovx wA=
            ")
        format("woff");
}
 

Это не удается в некоторых (может быть, во всех?) браузерах. Firefox жалуется:

Неизвестный дескриптор ‘»данные:шрифт/woff;base64″ в правиле @font-face. Перешел к следующему объявлению.

В веб-документах MDN явно указано, что это возможно для data URI:

URL-адрес данных предоставляет файл внутри файла, который потенциально может быть очень широким по сравнению с шириной заключающего документа. В качестве URL-адреса данные должны быть форматируемыми с пробелами (ввод строки, вкладка или пробелы) […]

(с оговоркой о кодировке символов, которая не имеет отношения к тому, могут ли строки быть обернуты).

Я знаю, что видел font-face объявления CSS, которые прерывают длинные data: URI с разрывами строк и отступами, и это прекрасно работает в Firefox. Но сейчас я не могу их найти.

Ни одна из моих попыток следовать этому руководству и фактически разбить строку base64 пробелом не позволила избежать вышеуказанной ошибки, и объявление игнорируется.

Как я могу обернуть строки исходного кода CSS data декларации URI таким образом, чтобы они правильно соответствовали CSS и работали во всех современных браузерах?