font:100 1.1em/37px Tahoma, Helvetica, Sans-serif;
What does the 100 mean? font-weight? What does the 1.1em mean? line-height? And 37px? font-size?
Here is a cool font shorthand cheat sheet which can be found here.
So in your example, 100 is the font-weight, 1.1em is the font-size, and 37px is the line-height.
You're right on the font weight, but 1.1em/37px means the font size is 1.1 ems and the line height is 37 pixels, not the other way around.
W3C CSS2.1 font property reference
See also: What does this CSS font shorthand syntax mean?
Its short hand.
http://htmlhelp.com/reference/css/font/#font
Basically its setting the font size, then family.
Related
Is there a way to use the font-family as a css-selector?
Like:
font-family:Arial{
font-size: 16pt;
}
Achieved without any javascript, pure CSS. So far I doubt there is, but you never know.
Usecase:
Having a text in latin chars and thai chars with two different font-families has a bad styling when rendering pdf with e.g. Openhtmltopdf or displaying html in Internet Explorer. Chrome has some magic to make it look alright, but I dont want that. The thai font chars in my case can match the latin chars when setting them to 1.5em. So it would be great to have some selector that sets it to 1.5em when that font is used.
Is there a way to use the font-family as a css-selector?
No, that is not possible.
If the font-family was applied via inline style attribute everywhere, then you could perhaps use an attribute selector on that.
But for styles originating elsewhere, no such selector exists.
font is the shorthand property for all 5 individual font properties and this is the order of how you use them-
font-style
font-variant
font-weight
font-size/line-height
font-family
For example- p {font: italic small-caps bold 12px/30px Georgia, serif;}
And if you want a specific font-family and font-size for all the elements, you need to give these properties to the one selector that represents all the elements and that is * So the answer to your question is below-
* {font: 20px Arial, sans-serif;}
For more details you can see this page
body{
font-family:Arial
font-size: 16px;
}
This your Answer
this css apply the changes to your all text in your html file
And if you want to change or specify the font-size of an element that is set the font-family via inline CSS, IT'S POSSIBLE. You can even change the font-family that is set via inline CSS, see the snippet below, and please lemme know if it works for you or not.
#import url('https://fonts.googleapis.com/css2?family=Peddana&family=Sansita+Swashed:wght#600&display=swap');
*[style="font-family: 'Sansita Swashed', cursive;"] {
font-family: 'Peddana', serif !important;
font-size: 32px;
}
<h2 style="font-family: 'Sansita Swashed', cursive;">Lorem ipsum dolor sit amet.</h2>
I have created a question mark button using the Arial font.
The CSS looks like this:
.question {
font: bold 24px Arial;
}
It appears correctly on almost all browsers, as this screenshot shows.
However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.
My question: is it possible to force the browser to use Arial?
You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.
Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:
.question {
font: bold 24px Arial, sans-serif;
}
I'm new to CSS and I'm trying to learn the concept of font. I saw this code online, I understand by default 1em = 16px but I don't understand why 2.8em is divided by 1.2? What is the reason behind it or is it unnecessary?
h1 { font: 700 2.8em/1.2 "Droid Sans", sans-serif; }
That is the short-hand font syntax for defining both font-size and line-height; specifically a font-size of 2.8em and a line-height of 1.2. You can consult the MDN on the font CSS property for more details.
I have a lot of css class where I redefine font sizes, example:
.ko {font-size:2.2em;}
.szik {font-size:2.8em}
Now I replace my default font with a custom one, I define a new one:
#font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
}
My problem is that the font size of the old one does not match with the new one, and my last chance to rewrite my all code. Can I solve this problem easily? How?
I try this solution, but it's not working.
#font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
font-size: 10.5em;
font-size-adjust: 10.5;
}
Thanks for the answers.
The font size is not changed at all when you change font family, but the dimensions of characters will change. If this is a problem, you need to reconsider your choices of font families and font sizes.
You’re not describing how you use fonts, so I’ll make a guess. Suppose your copy text font is Arial and you are using Bebas Neue for headings. In Bebas Neue, all letters are about as tall as uppercase letters in Arial. It’s an odd font that intentionally loses case distinctions, and this has its implications. (For example, if you used a huge relative font size like 2.8em, the sizes of letters will become even more huge, when in BebasNeue versus copy text Arial.) If you use it, you simply need to select font sizes accordingly. This should not be a big issue if you have set heading font sizes in a controlled manner.
In principle, you could use font-size-adjust to tune font sizes according to font family, but it works on relative x-heights (10.5 would be an absurd value), and it is only supported by Firefox, in a broken manner.
You don't need to rewrite all the font sizes, just change the font-size for the body tag:
body {
font-size: 15px; /* use an appropriate value */
}
When you say "1.2em" in a css rule, you're just saying that you want to use the inherited font size * 1.2. Is the same as using percentages.
I have two browsers both running in Ubuntu 10.
Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below
Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.
To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.
Strange enough text (including this one) that is not bold look exactly the same.
The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.
My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.
EDIT: This is the CSS that apply to the text as requested:
text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;
font-size: 180%;
direction: ltr;
font-size: 10px;
line-height: 125%;
A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).
Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.
Short answer: don't do that.
Cheers,
Thomas
Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.
Alternative go for some of the opensource/free webfonts from Google etc.
what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?
If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.
Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.
If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)