1

I have a CSS that includes

.warning{
  margin-top: 1em;
  padding: 10px 5px 15px 45px;
  border-color: #680000;
  border-width: 5px 3px 1px 1px;
  border-style: solid;
  font-family:Buxton Sketch, Arial;
  background: #ffcccc url("../images/warning.gif") no-repeat 3px center;
  font-style: normal;
}

So my main goal is to have a text shown in Buxton Sketch, but if the font is not available on the computer from which my website is viewed - then Arial is the next choice (because it's a common one). The point is that Buxton Sketch in size 6 is pretty much equal to Arial in size 4. So in my .html page I have the following code:

<div class="warning"><font size="4"><b> Please note!</b></font><br/>
<span style="color:black">
Several previous versions do not include a <i>back</i> button, thus - once you go there - there is no going back!
(that is - apart from the casual <i>back</i> button in every browser). So be careful!
<span style="color:black">
</span></span></div>

Now, when viewing my webpage on Windows that has Office installed on, I see the "warning" section in too small letters, but on Linux its ok. If instead of size <font size="4"> I write <font size="6"> then on Windows its ok, but on Linux it's too big.

Is there a way to check whether or not the font is installed and only then deciding the size? So that if Buxton Sketch is installed the size will be 6, and else it will be 4 (or maybe I'd like to insert another font as my 2nd priority, and have Arial as my third, etc.)

If there is a way - is the change only in the .html file or does it have to be in the CSS?

Thanks!

TheEmeritus
  • 429
  • 1
  • 6
  • 18
  • 2
    Note that `font` tag is deprecated in HTML5 so it may not work in all modern browsers. So why not use `style="font-size: 4px"` etc. or just plain CSS to change font size? If you do it like that you can use all kind of different units for size like `em`, `pem`, `px`, `pt` and so on. – jsalonen Jun 01 '14 at 13:43
  • 2
    It is almost certain that the visitor’s computer does not have Buxton Sketch, so you might just as well omit it and thereby simplify the situation. And if you can and will serve it is downloadable font, then you can mostly take *it* as the starting point and not worry too much about other fonts. – Jukka K. Korpela Jun 01 '14 at 13:46
  • Is Buxton Sketch also larger when using *absolute* sizes? Then there is pretty much nothing you can do about this; the "drawn" size of a font is not something you can interrogate. And, AFAICT, you cannot easily check if a font is *used*. – Jongware Jun 01 '14 at 13:46
  • @JukkaK.Korpela - it doesn't have to be this specific font, but the idea itself. – TheEmeritus Jun 01 '14 at 19:48
  • 3
    @JukkaK.Korpela The question you linked does not have a [working] solution, so no need to mark as duplicate. – TheEmeritus Jun 01 '14 at 19:49
  • 1
    The older question has the correct answer, which is effectively “you cannot, except in a limited sense with `font-size-adjust`”. It also has the *problem* presented better, so if some new solutions are found, they should be posted as answers to the old question, not this duplicate. – Jukka K. Korpela Jun 01 '14 at 20:47

0 Answers0