CODEWITHSUNDEEP
cssfonts
Omid
Omid

Reputation: 4705

CSS: Specific fonts for different sizes

I want texts smaller than 14px to be Tahoma and larger to be Sans Serif only using CSS3 font-face property and without any extra class.

Is it possible using font-face and how ?

Upvotes: 3

Views: 943

Answers (3)

Patrick
Patrick

Reputation: 3498

Not possible with font-face, but possible with LESS using mixins and guards. As you can see, you need to define your font sizes slightly different - but that's it. Font-family declarations are based off this value.

I would highly recommend transitioning to LESS (or SASS). LESS runs client side, but there are ways to compile it server side and deliver it as CSS. See Compile a referenced LESS file into CSS with PHP automatically 

.fontSize (@a) when (@a >= 100) {
    font-family: Impact, Charcoal, sans-serif;
}
.fontSize (@a) when (@a < 100) {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.fontSize (@a) {
    font-size: @a;
}


.cs {
    .fontSize(50px) 
}
.imp {
    .fontSize(110px)      
}

<div class="cs">comic sans font family</div>    

<div class="imp">Impact font family</div>

screen shot

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

No, it is not possible. There is in general no connection between distinct properties, such as font-family and font-size in CSS. (Shorthands like font set several properties, but otherwise they do not change this.) CSS intentionally lacks programming features: you cannot make the value of a property depend on what has been set to another property as value. There are few exceptions to this; among them, font-size-adjust may seem related, but it works the other way around, and indirectly: it adjusts the font size according to the features of the font.

So no CSS solution. In JavaScript, you could investigate the style settings of elements and change font family if the computed font size is larger or smaller than some threshold. But it gets somewhat dirty, and you would probably need to traverse the entire document tree for that.

Upvotes: 0

Vivek Dragon
Vivek Dragon

Reputation: 2248

It is not possible by font-face. but you can have two different classes for different size like

.tohama{}
.sanserif{}

Upvotes: 0

Related Questions