tff моноширинный шрифт nbsp проблема пробелов в Firefox и IE

На Хроме все отлично работает. В Firefox и IE (IE - это файл.eot, преобразованный из.ttf), у меня проблемы с шириной символов для   и & # 32.

Используя предопределенный моноширинный шрифт,   отображается с правильной шириной. Но если я использую Ubuntu Mono или свой собственный моноширинный шрифт TrueType, символ пробела становится слишком узким, и текст не выравнивается по вертикали через разрывы строк. Это как если бы он использовал другой шрифт для символа пробела.

Если я вставлю фактический глиф в пробел (32 0x20), интервал будет правильным. Но как только я удаляю глиф и снова делаю символ пробела пустым, он возвращается к ошибочному интервалу. В приведенном ниже примере используется Ubuntu Mono, загруженный из Google Fonts, чтобы его могли использовать другие. Буква "т", например, должна быть выровнена по вертикали. Во втором примере используется встроенный моноширинный шрифт, и он выглядит хорошо.

Пример HTML № 1:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
    </head>
    <body>  
        <h1 style="font-family: 'Ubuntu Mono'; font-size: 200%;">
            &gt;In&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___
        <br>&nbsp;One&nbsp;&nbsp;&nbsp;&nbsp;&lt;+&nbsp;+&gt;
        <br>&nbsp;&nbsp;&nbsp;eaR&nbsp;&gt;&gt;&nbsp;^&nbsp;&lt;&lt;&nbsp;Out
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[=]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OtheR</h1>
    </body>
</html>

Пример HTML № 2:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>  
        <h1 style="font-family: monospace; font-size: 200%;">
            &gt;In&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___
        <br>&nbsp;One&nbsp;&nbsp;&nbsp;&nbsp;&lt;+&nbsp;+&gt;
        <br>&nbsp;&nbsp;&nbsp;eaR&nbsp;&gt;&gt;&nbsp;^&nbsp;&lt;&lt;&nbsp;Out
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[=]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OtheR</h1>
    </body>
</html>
Источник

1 ответ

HTML <pre> Стихия решает мою проблему. Предварительно отформатированный текст, он ожидает моноширинный шрифт и пробелы отображаются с правильной шириной. Странно, но верно. По крайней мере, я нашел решение. Я просто вставляю весь этот текст в <pre> вместо <h1>, Единственное, что нуждается в изменениях, это ведущие пробелы, как <pre> не игнорирует их.

Источник
Другие вопросы по тегам