файл шрифта favicon.svg с кодировкой base64 .ttf не отображает текст в Chrome, работает в Firefox

ProgramBox

файл шрифта favicon.svg с кодировкой base64 .ttf не отображает текст в Chrome, работает в Firefox

Post author:admin
Запись опубликована:17 марта, 2023
Post category:Вопросы по программированию

#html #css #svg

#HTML #css #svg

Вопрос:

Мои favicon.svg дисплеи в Firefox, но не в Chrome:

 <!DOCTYPE html>
<html lang="en">
<title>Title</title>
<meta charset="UTF-8">
<style>
  @font-face {font-family: "MyFont";src: url(MyFont.ttf) format("truetype");}
</style>
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg xml">
</html>

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <style>
      @font-face {
        font-family: 'MyFont';
        src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMpFSh68AAAGIAAAAYFZETVhmsG54AAAB6AAABeBjbWFwAAwAlAAAB8gAAAA0Z2x5ZpGeXWAAAAC8AAAAQGhlYWT5D/2eAAABJAAAADZoaGVhB 4EHwAAAWQAAAAkaG10eAetAJYAAAFcAAAACGxvY2EAIAAAAAABHAAAAAZtYXhwAAYANwAAAPwAAAAgbmFtZR qOZYAAAf8AAABmHBvc3T/bQBkAAAJlAAAACAAAgBSAAAEeQPoAAcADQAAJSEHIwEzASMBIQEnIwcDpf2Bd10B4GgB31z9KwI7/vYRBhP//wPo/BgBSAI6JSsAAAEAAAACADYAAwAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAABAAAAAQAA7CgSEV8PPPUACQgAAAAAAMpme5sAAAAAypc3xwAz/ oEwgVUAAAACQACAAAAAAAAAukARATEAFIAAQAAAu7/BgAJBRQAMwACBMIAAQAAAAAAAAAAAAAAAAAAAAIAAwR AZAABQAEBZoFMwAAAR8FmgUzAAAD0QBmAgAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAcHlycwBAAEEAQQYA/gAAAASwABYAAAABAAAAAAPoBXgAAAAgAAAAAAABAAEBAQEBAAwA Aj/AAgABf//AAkABv//AAoABv//AAsAB///AAwACP//AA0ACP//AA4ACf//AA8ACf//ABAACv//ABEACv//ABIAC///ABMADP//ABQADP//ABUADf//ABYADf//ABcADv//ABgAD///ABkAD///ABoAEP//ABsAEP//ABwAEf//AB0AEf//AB4AEv//AB8AE///ACAAE///ACEAFP//ACIAFP//ACMAFf//ACQAFv//ACUAFv//ACYAF///ACcAF///ACgAGP//ACkAGf//ACoAGf//ACsAGv//ACwAGv//AC0AG///AC4AG///AC8AHP//ADAAHf//ADEAHf//ADIAHv//ADMAHv//ADQAH///ADUAIP//ADYAIP//ADcAIf//ADgAIf//ADkAIv//ADoAIv//ADsAI///ADwAJP//AD0AJP//AD4AJf//AD8AJf//AEAAJv//AEEAJ///AEIAJ///AEMAKP//AEQAKP//AEUAKf//AEYAKv//AEcAKv//AEgAK///AEkAK///AEoALP//AEsALP//AEwALf//AE0ALv//AE4ALv//AE8AL///AFAAL///AFEAMP//AFIAMf//AFMAMf//AFQAMv//AFUAMv//AFYAM///AFcAM///AFgANP//AFkANf//AFoANf//AFsANv//AFwANv//AF0AN///AF4AOP/ AF8AOP/ AGAAOf/ AGEAOf/ AGIAOv/ AGMAO// AGQAO// AGUAPP/ AGYAPP/ AGcAPf/ AGgAPf/ AGkAPv/ AGoAP// AGsAP// AGwAQP/ AG0AQP/ AG4AQf/ AG8AQv/ AHAAQv/ AHEAQ// AHIAQ// AHMARP/ AHQARP/ AHUARf/ AHYARv/ AHcARv/ AHgAR// AHkAR// AHoASP/ AHsASf/ AHwASf/ AH0ASv/ AH4ASv/ AH8AS// AIAAS// AIEATP/ AIIATf/ AIMATf/ AIQATv/ AIUATv/ AIYAT// AIcAUP/ AIgAUP/ AIkAUf/ AIoAUf/ AIsAUv/ AIwAU// AI0AU// AI4AVP/ AI8AVP/ AJAAVf/ AJEAVf/ AJIAVv/ AJMAV// AJQAV// AJUAWP/ AJYAWP/ AJcAWf/ AJgAWv/ AJkAWv/ AJoAW// AJsAW// AJwAXP/ AJ0AXP/ AJ4AXf/ AJ8AXv/ AKAAXv/ AKEAX// AKIAX// AKMAYP/ AKQAYf/ AKUAYf/ AKYAYv/ AKcAYv/ AKgAY// AKkAZP/ AKoAZP/ AKsAZf/ AKwAZf/ AK0AZv/ AK4AZv/ AK8AZ// ALAAaP/ ALEAaP/ ALIAaf/ ALMAaf/ ALQAav/ ALUAa// ALYAa// ALcAbP/ ALgAbP/ ALkAbf/ ALoAbf/ ALsAbv/9ALwAb//9AL0Ab//9AL4AcP/9AL8AcP/9AMAAcf/9AMEAcv/9AMIAcv/9AMMAc//9AMQAc//9AMUAdP/9AMYAdf/9AMcAdf/9AMgAdv/9AMkAdv/9AMoAd//9AMsAd//9AMwAeP/9AM0Aef/9AM4Aef/9AM8Aev/9ANAAev/9ANEAe//9ANIAfP/9ANMAfP/9ANQAff/9ANUAff/9ANYAfv/9ANcAfv/9ANgAf//9ANkAgP/9ANoAgP/9ANsAgf/9ANwAgf/9AN0Agv/9AN4Ag//9AN8Ag//9AOAAhP/9AOEAhP/9AOIAhf/9AOMAhv/9AOQAhv/9AOUAh//9AOYAh//9AOcAiP/9AOgAiP/9AOkAif/9AOoAiv/9AOsAiv/9AOwAi//9AO0Ai//9AO4AjP/9AO8Ajf/9APAAjf/9APEAjv/9APIAjv/9APMAj//9APQAj//9APUAkP/9APYAkf/9APcAkf/9APgAkv/9APkAkv/9APoAk//9APsAlP/9APwAlP/9AP0Alf/9AP4Alf/9AP8Alv/9AAAAAgAAAAMAAAAUAAMAAQAAABQABAAgAAAABAAEAAEAAABB//8AAABB////wAABAAAAAAAAAAcAWgADAAEECQAAAD4AAAADAAEECQABACQAPgADAAEECQACAA4AYgADAAEECQADADwAcAADAAEECQAEADQArAADAAEECQAFACoA4AADAAEECQAGADQBCgBGAG8AbgB0ACAAZABhAHQAYQAgAGMAbwBwAHkAcgBpAGcAaAB0ACAARwBvAG8AZwBsAGUAIAAyADAAMQAxAEEAbgBkAHIAbwBpAGQAQwBsAG8AYwBrAC0ATABhAHIAZwBlAFIAZQBnAHUAbABhAHIARwBvAG8AZwBsAGUAOgBBAG4AZAByAG8AaQBkAEMAbABvAGMAawAtAEwAYQByAGcAZQA6ADIAMAAxADEAQQBuAGQAcgBvAGkAZABDAGwAbwBjAGsALQBMAGEAcgBnAGUAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAAMAAwADsAIAAyADAAMQAxAEEAbgBkAHIAbwBpAGQAQwBsAG8AYwBrAC0ATABhAHIAZwBlAC0AUgBlAGcAdQBsAGEAcgADAAAAAAAA/2oAZAAAAAAAAAAAAAAAAAAAAAAAAAAA) 
               format('truetype');
      }
    </style>
  </defs>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="MyFont">A</text>
</svg>

При прямой загрузке вышеупомянутое изображение загружается, как и ожидалось, как в Chrome, так и в Firefox. Однако при загрузке вышеупомянутого html значок появляется только в Firefox, значок не отображается в Chrome. Что я сделал не так?

^{favicon.svg использует .ttf файл шрифта в кодировке base64, который я минимизировал : pyftsubset AndroidClock.ttf --unicodes=U 0041 --output-file=/tmp/a.ttf amp;amp; base64 /tmp/a.ttf > /tmp/t . Затем изображение создается из буквы A этого шрифта.}

^{Google Chrome 85.0.4183.121 (официальная сборка) (64-разрядная версия) и Firefox 80.0 (64-разрядная версия) на Linux.}

Ответ №1:

Это определенно ошибка Chrome, но я обнаружил обходной путь: веб-шрифт в значке работает, если вы также включаете тот же SVG в <img> тег, даже скрытый.

 <img src="favicon.svg" style="display: none">

(Если вы затем удалите <img> тег, он все равно продолжит работать, пока вы не выйдете из Chrome, что затрудняет отладку.)

Я зарегистрировал это как ошибку Chromium 1140920.

Вы, вероятно, также хотите исправить data:font/truetype;charset=utf-8;base64, data:font/ttf;base64, , поскольку font/truetype это недопустимый тип MIME и font/ttf не имеет кодировки.

1. 1 Это частично работает для меня: появляется значок, но он отображается неправильным шрифтом. (Я отредактировал свой минимальный пример, чтобы включить строку, которую я непреднамеренно пропустил.)

2. @user2768 С помощью этого обходного пути Chrome показывает тот же результат, что и Firefox для меня, и, похоже, это символ ‘A’ из вашего встроенного шрифта. Я добавил скриншот того, что я вижу. Если это не то, что вы ожидаете, может быть, проверьте исходный шрифт и ваш процесс настройки? Здесь AndroidClock.ttf вообще нет символа ‘A’. Вероятно, вы также хотите исправить data:font/truetype;charset=utf-8;base64, data:font/ttf;base64, .