Символ новой строки и <br>отображаются в виде прямоугольника в Microsoft Edge

Question

Проблема:

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

Так что в Chrome / Firefox это выглядит так:

Но на Edge это выглядит так:

Как мы решаем это?

Answer 1

Проблема заключается в том, что в Edge символ пробела (0x20) отображается на новых строках, а ваш шрифт не имеет глифа для Amerino Символ латинского пробела.

Это известная проблема (которая помечена как решенная, но, по-видимому, это не так)

---

Самое простое решение , если ваша проблема возникает только с тегами <br>, это стиль <br> и заставить их использовать системный шрифт по умолчанию:

br {
  font-family: initial !important; /* Fix error on Edge (br render a Latin space character) */
}

---

Если у вас есть проблемы с новой строкой в ​​абзаце (например, \n символ в статье), вы застряли с длинным решением добавления символа пробела в ваш собственный шрифт.

Вы можете использовать библиотеки, такие как fonttools , чтобы редактировать исходный ttf / otf, добавляя глиф 0x20, и после этого он будет работать нормально.