font size in pre element is limited to 12px

2yil 0
Viewed 45

im putting an ascii art inside a pre element and setting the font size to 2px (1.5px for small screens). it works fine on mac (chrome, safari) and android (chrome):

enter image description here

however when i tested it in Windows (Chrome and Edge) the browsers automatically set the font size to 12px, even though ive put font-size: 2px !important;:

DevTools screenshot

@media screen and (min-width: 500px) {
  #terminal-ascii-art {
    font-size: 2px !important;
    background-color: white;
    color: black;
  }
}

@media screen and (max-width: 500px) {
  #terminal-ascii-art {
    font-size: 1.5px !important;
    background-color: black;
    color: white;
  }
}

#terminal-ascii-art {
  line-height: normal !important;
  padding: 0;
  margin: 0;
  border: 0;
}
<pre id="terminal-ascii-art">
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ .  . .'$@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$k ..........     _$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.. !$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$                  /$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$          ($$$$$$$$$$$$$$$$$$$$$'                  @$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$ ..     ..   . . O$$$$$$$$$$$$$$'.....             ..8$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.......... $$$$$$$$l. .. .Y$$$ `                   ..$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$ ........ .$$$$$$$$$$$$$$$$$$'.  ..                 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$a         '{$$$$$$$$$$$$$$$$$$$$$$$_,1$.       .     .. . $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$.          $$$$$$$$$$$$$$$$$$$$$$$$$$$.^                   .  /$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$ ........ $$$$$$$$$$$$$$$$$$$$$$$$$$$$z$...`..............  $$$oi .  .  .. .   . a$$$$$$$$$$$$$$$
$$$..       .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.               .@$$$$$$$$$$$$.      ...      ...' '}
$$$ ....... .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ .... ...  .....  I$$$$$$$$$$n..... $$$$$$$$$$$@~ . .
$$$        .l$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$..   .             ..$$}.....    ...$$$$$$$$$$$$$$$$$$$
$$$.        b$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.   v$$                      . .$$$$$$$$$$$$$$$$$$$$$$$$
$$$ ....... _$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.. ..  ...........d . . ,$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$q         $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$/.              $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$.   ... .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$........... $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$@        %$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.             $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.       .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'               $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$ .....  .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@ ..................-$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$d.      .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.                      ?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$. ....  @$$$$$$$$$$$$$$$$$$$$$$$$ .........................  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$     ...$$$$$$$$$$$$$$$$$$$$$-. .                        ..$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$..    .Y$$$$$$$$$$$$$$$$$$ .                              ^$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$&.    .$$$$$$$$$$$$$$$$...                                .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$Y    .@$$$$$$$$$$$$$@..                                    .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$               
</pre>

css html
1 Answers

turns out this is caused by browser language settings (tested in win10 opera). when the browser's preferred language is chinese it limits the minimum possible font-size to 12px.

transform: scale(0.1) can be use to counter this restriction. it's still a pain to reposition the scaled down element though.

2yil0
Related