Monday 15 July 2019

Monospace CSS not working in Chrome for Android



I'm trying to render code in monospace on my personal web site. The following CSS style works on desktop browsers (and Firefox for Android) without issues, but fails on Chrome for Android:



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

}


Adding Droid Sans Mono does not help:



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



Simply using font-family:monospace works correctly on Chrome for Android, but by doing so, I lose the ability to use specific fonts on desktop operating systems.



How do I get code to display with a monospaced font on Android without losing the ability to use specific fonts on other platforms? I don't want to use custom fonts as suggested by the answer to this question, I just want to use the monospaced font provided by the system.



For reference, the style file is here.


Answer



It now works after updating to Chrome 30. Looks like a browser bug after all...


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...