It's screenshot of the code I am working with. I want to understand the font-family declaration syntax and in what sequence it works
Here's the code:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #333333;
margin: 0;
}
Basically I want to understand the font-family declaration syntax
The font-family property can hold several fonts. If the browser does not support the first font, it tries the next font. If the browser supports "Segoe UI" it will be "Segoe UI" otherwise it moves to next.
So as a best practice order your fonts in the order you need.
The font family is applied in order from the font you entered first.
For example, if a user's PC does not have a font, it is applied in order from the very beginning.
if there is a corresponding font, the fonts that follow the applied font will not be applied.
If the font name contains spaces, use quotation marks to indicate that it is a single font.
I'm not good at English, so I don't know if I delivered it correctly, but I hope it helped.
Related
the following font style code does not work in firefox, I tested it in chrome and iexplorer and it works, so must be a compatibility problem.
font: italic normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
Can someone confirm it, or maybe there's an alternative for firefox.
FIX:
font: italic normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
For FireFox, you should set all the properties without using the shorthand property. font: is the shorthand property for many other font properties:
Instead it should look like this:
font-family: monospace;
font-size: 20px;
font-weight: bold;
color: blue;
http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/cssref/pr_font_font.asp
This appears to be a bug in Firefox. In the Developer Tools, no errors are shown, but when inspecting style sheets, the styles for the element are empty.
A quick workaround is to remove of the normal keywords (or all of them, since they are redundant: all sub-properties not set explicitly in a font shorthand are set to their initial values).
P.S. Your code is correct, Firefox just does not handle it well. As a reference to font shorthand syntax (if you use it), use the W3C CSS 2.1 specification.
For google fonts the font-family and font-weight are variables. The short syntax should be
font: 400 "Open Sans", Helvetica, Arial, sans-serif;
But I get invalid property value,
Is there a way to declare just font-weight and font family in the short version? I want everything else to stay as it is (font style etc)
I believe the font-size must be specified when using font shorthand.font: 400 12px "Open Sans, Helvetica, Arial, sans-serif;
See http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/ and http://www.w3.org/wiki/CSS/Properties/font
You'll need to use the good old font-weight and font-family instead of the shorthand.
I'm using webfonts on a site. For certain headings (h1, h2, etc.) I'm using bold variants (and setting font-weight to normal) because they look much better than using the regular variant and leaving the h-tags with the default bold weight. It's necessary to specify font-weight: normal because otherwise "the bold is bolded", which looks really terrible.
The problem I'm having is, how do I specify standard web fonts as fallback fonts and have the bold setting "restored"?
So for example I might do something like:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: normal;
}
As long as the webfont is present we have no problem, but if the webfont fails we end up with non-bold Arial.
Is there a way to specify "Arial Bold" in the font-family of the h1 (I know that doesn't work, but it's the desired goal)? Or perhaps in the #font-face definition I can say "this applies only to the bold version of whatever it's assigned to" – so I can omit the font-weight: normal from the h1 style?
Try specifying font-weight: bold in both places:
#font-face {
font-family: "My bold webfont";
src: url("url/of/webfont/bold/variant");
font-weight: bold;
}
h1 {
font-family: "My bold webfont", Arial, sans-serif;
font-weight: bold;
}
Here's a demo. p#one shows this technique in use; if you look at it in a browser that doesn't support WOFF webfonts, you'll see the default font in bold.
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;
I am putting together a website in codeIgniter, but I'm having some trouble with the CSS
The below code is giving me a serif font - I know the stylesheet's properly linked because the text fits all the other parameters, and changes when I unlink it.
span.navbig {
font-size: 36pt;
font-family: Gill Sans / Gill Sans MT, sans-serif;
letter-spacing: -1.5pt;
text-decoration: none;
}
What am I not seeing here?
Thanks
Separate thefont types in your font-family declaration different, something like this:
font-family: "Gill Sans", "Gill Sans MT", sans-serif;
Here's some easy reference:
Note: Separate each value with a comma.
Note: If a font name contains white-space, it must be quoted.
Single quotes must be used when using the "style" attribute in HTML.
And here's the W3C recommendation:
Font family names must either be given quoted as strings, or unquoted
as a sequence of one or more identifiers. This means most punctuation
characters and digits at the start of each token must be escaped in
unquoted font family names.
When using FONT types that consist of two words, quotes must be placed on them so the browser does not read them as separate entries.
<style type="text/css">
span.navbig {
font-size: 36pt;
font-family: "gill sans", sans-serif;
letter-spacing: -1.5pt;
text-decoration: none;
}
</style>
from http://www.htmlite.com/CSS004.php