I took a CSS quiz at w3schools.com, and I got all of the answers correct except the one below. I tried to search on the subject, but as far as I can see the answer should be correct. Where am I wrong? Really confused with this.
15. Which property is used to change the font of an element?
You answered:
font-family
Wrong Answer!
The font property is the one that changes all aspects of a font, including family, style and weight. The font-family property only changes the font-family. The family is a group of related fonts (or typefaces).
So 'Comic Sans MS' is a font family, while 'Comic Sans MS Bold 10pt' is a font. In speech, people tend to mix up those terms.
font and font-family do different things:
Best illustrated with an example. Arial is a font family. Arial Bold 14 point is a type font. Helvetica is a font family. Helvetica Ultra Compressed 26 point is a type font.
The quiz says that the correct answer is that both font-family and font can be used to set the font. This can be characterized as correct, when the other options are font-family alone and font alone. This question, and the quiz in its entirety, is not as seriously wrong as much of w3schools content (see http://w3fools.com), just largely pointless and inaccurate.
The font-family property sets, as the name suggests, the font family alone. The font shorthand sets all normally settable font properties and also line height. The interpretation of the question revolves around the question “what is a font?” If you mean font family, then font-family sets that only, whereas font also sets font size, font weight, etc. If you mean a specific typeface in a specific size, specific weight etc., then only font does that.
15. Which property is used to change the font of an element?
You answered:
font
Wrong Answer!
Basically the correct answer is both of them (font anf font-family)
Related
I'm using monospace for dollar sign my website, I get the result I'm looking for on chrome / windows and mobile phone but font render different on iOS? Why is the font display different? Is there a way to fix it?
It would be helpful if you provided the CSS code that you are using but I'm guessing you are doing something like this
font-family: monospace;
The reason this looks different on different operating systems is that "monospace" doesn't actually refer to a particular font it refers to any font where "All glyphs have the same fixed width" so each browser has a different font that it uses for "monospace".
If you would like your font to be consistent across different browsers and operating systems you will need to specify a particular font. This article from MDN explains how to specify font on the web https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
Chrome font for monospace is consolas , you can check each font using chrome://fonts. Think this might be useful to someone
What's the difference between ui-sans-serif and sans-serif fonts in font-family in CSS? And ui-serif vs. serif? And ui-monospace vs. monospace?
Where does system-ui fit into this? Would you use it for all 3 types of fonts, and where would it go in the list of fonts?
I usually see the "ui-" variant coming first in the list of fonts in font-family in CSS, and the other coming last. Something like font-family: ui-sans-serif, (more fonts here), sans-serif. What's the point in doing that if the first matched font will be used? Since ui-sans-serif is a generic font, won't it always be matched and there's no need to add any fonts after it?
ui- generics should map to the default fonts of the system while non ui- generic ones map to the default of the browser.
A web-browser may have the same default font set for all platforms, however different platforms do have different default fonts.
I would like to know how chrome chooses which font to render? I am asking this because using Chrome Developer Tools I can see that the font family computed is different from the font family rendered and this is confusing. Similar questions on Stackoverflow was not of much help in this particular instance.
My computer font family looks like:
font-family: museo-sans, sans-serif, Futura;
Rendered font looks like:
Helvetica—473 glyphs
In this article, it is mentioned that chrome maps a rendered font to a the computed font listed. What does this mean exactly and why does it do that? Is there a way to control which font is rendered?
Same as any other browser: if it can't find the first font, it tries the next, and so on and so on until it runs out of rules. If no fonts match, then the font is inherited from the parent element, all the way up to the document level, where it'll just pick the browser's default font.
In this case, things are a bit weird, because the order you're showing is "a real font" followed by "a generic CSS class that always resolves, but without any guarantee as to which font that will be, just that it'll be a sans-serif font", followed by the real font "futura".
So Chrome will try museo, won't find it, sees the generic "sans-serif" and just picks a known sans-serif font for you. Usually that's something like Arial or Helvetica, but the CSS spec doesn't say anything about which font it has to be, specifically. It just needs to be a sans-serif font.
The weird part here is that the ordering you chose means that the "futura" at the end will never be checked. The browser will always find a suitable font once it hits serif, sans-serif, cursive, fantasy, or monospace
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'd like to tell the browser to use a font that is both monospace and sans-serif (usually the default monospace font has serifs, and the default sans-serif font isnt monospaced). Is there any way to specify this in CSS other than to provide a list of fonts I know to fit my criteria?
CSS's font-family doesn't allow specifying more than one generic font keyword in a single font family name, so you'll either have to go with monospace or sans-serif.
No, you can't say what type of family of font you want. CSS doesn't know if a font has serifs or not.
However, you can just look on here:
http://code.google.com/webfonts
And use one of those fonts and it'll work across all browsers.