Assigining different font-size per each font in one font-family
You cannot set font size so that it would depend on the font family.
Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).
If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang
attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.
Fonts inside a font family display different in size
What you are looking for is the font-size-adjust
property — a nearly perfect solution to this problem. Of course, browser support is terrible: it only works on Firefox.
Here's an example (open in Firefox): http://jsfiddle.net/zL6vL/1/
css different font sizes on different families
There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust
- a new CSS3 property introduced specifically to address this problem. The specification says:
In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.
However, it is only supported in Firefox as of now, so you might want to look for alternatives.
For examples of how to use it, see:
http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
https://developer.mozilla.org/en/CSS/font-size-adjust
http://www.fonttester.com/help/css_property/font-size-adjust.html
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
Multiple font-weights, one @font-face query
Actually there is a special flavor of @font-face that will permit just what you're asking.
Here's an example using the same font-family name with different styles and weights associated with different fonts:
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
You can now specify font-weight:bold
or font-style:italic
to any element you like without having to specify the font-family or overriding font-weight
and font-style
.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
EXAMPLE PEN
Can CSS choose a different default font and size depending on Language
This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:
@font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF, U+980-9FF;
}
The unicode-range
bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.
How to change multiple font styles in one sentence
Wrap what you want to change in a <span>
tag then assign the class accordingly.
You'll notice that I cleaned up the code considerably. It is much easier to read by doing it this way.
p {
color: #c0bebe;
}
.googlefont {
font-family: Lato;
font-weight: 600;
}
.reviewfont {
font-family: Lato;
font-style: italic;
}
i {
color: yellow;
}
.Review {
font-size: 24px;
color: #c0bebe;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="col-md text-left mt-5">
<h5 class="Review">Reviews</h5>
<ul class="list-unstyled quick-links">
<li>
<p> <span class="googlefont">Google</span>-<span class="reviewfont">20 reviews </span></p>
</li>
<li>
<p>4,9<i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
</li>
<li>
<p>Facebook - 32 reviews</p>
</li>
<li>
<p>5,0 <i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
</li>
</ul>
</div>
Related Topics
Z-Index Behaviour on Pseudo Elements
Adding CSS Stylesheet to Pages Based on Route in Opencart
Cross-Browser 'Cursor:Pointer'
Input Padding Cutting Out Text in Firefox
Long Pages in Firefox Offset When Scrollbar Appears
Best Practice for CSS Clear or Overflow
CSS Resize Property - Change Resize Icon Properties
Ie Doesn't Support Height=Auto for Images, What Should I Use
What Is the Rule Behind "CSS 256 Classes Override One Id"
How Can Display Table-Row Behave Like Colspan=3
Using an Data Uri Svg as a CSS Background Image
Best Way to Structure a CSS Stylesheet
What Is the Third Value in CSS Padding
Add Padding Without Changing Overall Width
Rake Assets:Precompile Throws SASS::Syntaxerror: Invalid CSS After "*/"
Using Negative Integers with Implicit Rows in CSS Grid