Как загрузить пользовательские шрифты в веб-представлении в xamarin форм UWP проекта - PullRequest
0 голосов
/ 14 июня 2019

У меня проблема с загрузкой и применением пользовательских шрифтов в html-данных, загруженных в компонент webview в проекте UWP форм xamarin. Поскольку шрифты не загружаются, правильный текст не применяется к тексту в html.

Я создаю приложение форм xamarin, в котором я использую веб-представление для отображения html-данных из книги. Данные представляют собой текст из книги и используют некоторые пользовательские шрифты, такие как Alvi Nastaleeq, для стилизации текста. Шрифты применяются в версиях IOS и Android с использованием правила font-face, но оно не работает в UWP. Шрифты находятся в папке Assets / Fonts в проекте UWP.

Я попытался использовать правило шрифта в UWP с правильной URI-схемой ms-appx-web: //, и оно не работает. Я также прошел через предложение в следующем посте: https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ и не работает либо

Я попытался загрузить оба шрифта .woff и .ttf, но это не работает.

это то, что у меня есть в заголовке HTML:

            // this one was a try for UWP.. not working..
        @font-face {
        font-family: 'Alvi Nastaleeq';
        src: url('ms-appx-web:///Assets/Fonts/Alvi Nastaleeq.ttf');
        } 

             // theese are for IOS and Android and works..
       @font-face { 
        font-family: Alvi Nastaleeq;
        src: url('Fonts/Alvi Nastaleeq.ttf') 
            }
        @font-face { 
        font-family: Aslam;
        src: url('Fonts/Aslam.ttf') 
            }
        @font-face { 
        font-family: Al Qalam Quran Majeed;
        src: url('Fonts/Al Qalam Quran Majeed.ttf') 
            }
        @font-face { 
        font-family: Amiri-Bold;
        src: url('Fonts/Amiri-Bold.ttf') 
            }
   </style>

Я хочу, чтобы шрифты применялись к html-данным, загруженным в представление веб-просмотра в версии UWP моего приложения xamarin форм.

1 Ответ

0 голосов
/ 28 июня 2019

Это был единственный способ заставить его работать:

  1. Кодируя ваш шрифт, вы можете использовать Font Squirrel's Webfont Generator .Выберите параметры Expert ... , затем в разделе Параметры CSS установите флажок " Base 64 Encode ".Обратите внимание, что если вы недовольны результатом (рендеринг выглядит плохо), попробуйте еще раз, и в разделе «Эксперт» выберите « Сохранить существующий » для « Подсказка истинного типа ».

  2. Установите свойство @ font-face src равным следующему:

TTF FONTS:

url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING_HEREE) format('truetype');

Шрифты OPENTYPE:

url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING_HERE);

Шрифты WOFF:

url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING_HERE) format(???woff???);
...