Моноширинный CSS не работает в Chrome для Android

Я пытаюсь отобразить код в моноширине на своем личном веб-сайте. Следующий стиль CSS без проблем работает в настольных браузерах (и Firefox для Android), но не работает в Chrome для Android:

.code {
    font-family:Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

Добавление Droid Sans Mono не помогает:

.code {
    font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

Простое использование font-family:monospace работает правильно в Chrome для Android, но при этом я теряю возможность использовать определенные шрифты в настольных операционных системах.

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

Для справки: файл стиля находится здесь.


android google-chrome fonts css
person bwDraco    schedule 25.09.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Chrome не может получить доступ к Droid Sans Mono, указав имя таким образом, monospaced уже сопоставлен непосредственно со шрифтом Droid Sans Mono.

person Kinlan    schedule 27.09.2013

arrow_upward
0
arrow_downward

Теперь он работает после обновления до Chrome 30. В конце концов, похоже на ошибку браузера...

person bwDraco    schedule 25.10.2013
comment
У меня не работает в 2018 году: codepen.io/anon/pen/pxRzwY Вот скриншот как это выглядит на Android (Firefox и Chrome): i.imgur.com/pgB3HEi.jpg - person ; 08.10.2018
comment
Обратите внимание, что в будущем в шрифтах Google отсутствуют некоторые глифы. Мой обходной путь заключался в использовании Adobe Source Code Pro, в котором есть все символы (включая рисование прямоугольников, то, что мне было нужно). Mononoki также должен работать. - person Jacopo; 09.10.2018

arrow_upward
0
arrow_downward

Моноширинный шрифт по умолчанию можно изменить в настройках веб-браузера. Это также зависит от используемой операционной системы. Чтобы обеспечить согласованные результаты, вам необходимо загрузить собственный шрифт.

Вот что сработало:

@import url('https://fontlibrary.org/face/dejavu-sans-mono');

.monospace {
  font-family: 'Dejavu Sans Mono', monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning:none;
}
person ArthurS    schedule 16.11.2020