Geek Answers Handbook

Can CSS set the appropriate properties if the font exists?

I would like to use different fonts in my web application. Since their size is not equal, I want to do something in CSS, like this pseudocode:

if (exists(font1)) { font-size: 9pt; font-family: font1; } else { font-size: 12pt; font-family: font2; }

Is it possible? What is the best and right solution for this? How to determine the font size for a particular font and determine a different font size for the next?

+4
source share
2 answers

CSS generally has no conditions or other dynamic structures.

Your problem has been resolved with the so-called "font stacks". You declare a font-family with a comma-separated list of font names. Now the client browser selects the font from the list that it has. Therefore, creating good font stacks is a difficult task (because they should look similar or at least have the same letter spacing / line height). If you use Google for web font stacks, you will get good articles about this topic from professional font resellers who have already done the work for you by creating beautiful font stacks.

An alternative nowadays is to provide the font you want as a downloadable font through the @font-face declaration. However, keep in mind that:

  • you need several formats to support all browsers
  • they add extra weight to the page loading, which may be relevant to mobile phones.
  • You need the right to use a font or use a free font (Google offers a service in which you can choose from a variety of free fonts).
+4
source

You can use javascript for this statement .. or you can assign a different identifier for your text. For instance: -

 <div id="font1"><p>Some Text</p></div>

and then in your css file: -

 #font1 p{ font-family:sans-serif; font-size:10px; }

so that you can quite easily assign different fonts to different texts in your web application ...

-1
source

More articles:


All Articles