font: bold italic 35px 'Courier New', Courier, monospace
Why this code working neither this code
font:35px 'Courier New', Courier, monospace
and those code not working
font: bold 35px italic 'Courier New', Courier, monospace
font: Courier New', Courier, monospace bold italic 35px
why ordering so important
font: bold 35px italic 'Courier New', Courier, monospace
In CSS the shorthand is long-hand for font-style, font-variant, font-weight, font-size/line-height, font-family. If you do not order it correctly it will think you are trying to enter 35px for font-variant which is invalid CSS. So it will not work.
Related
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
I was just about to change the default font with Bootstrap SASS and I found this:
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
What's the difference between sans-serif and serif in this context? Because if I inspect my page, all fonts are Helvetica Neue.
How is serif/Georgia utilised if all I'm seeing is Helvetica Neue being used?
Those are just options to change the base style for the font so if you want serif or sans-serif. They do this:
Create the three base styles:
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
Then set the sans-serif on a base var:
$font-family-base: $font-family-sans-serif !default;
And use that base to define the font-family for the body therefore all the document:
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
The other options are there if you want to customize the theme and change quickly to serif or monospace all the document.
Here is the syntax:
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
I am not sure how to apply, tried these variations but no luck:
font: italic bold 12px/30px Arial icon
font: italic bold 12px/30px Arial|icon
font: italic bold 12px/30px icon
It work only if I apply this way:
font: icon
Here you can find doc I referred
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
This above means that what you can do is set a font shorthand, but those caption |icon(etc..) are a font-family type, therefore replace it - in your example - on Arial
.p1 {
font: italic bold 12px/30px icon
}
.p2 {
font: italic bold 12px/30px Arial
}
<p class="p1">FOO BAR</p>
<p class="p2">FOO BAR</p>
I have an HTML which uses the Helvetica Neue font for most of the text.
font-family: 'Helvetica Neue', Helvetica, Arial, Calibri, sans-serif;
<font color="#ffffff" face="'Helvetica Neue Medium','Helvetica Neue', Helvetica, Arial, sans-serif">Sample text</font>
Using Fount I can see that the text is actually written using Helvetica Neue Medium.
My question is where does the css/html look for this font ? I checked my /Windows/Fonts folder and there is no Helvetica font there.
The CSS will look for fonts installed in your font directory.
We can configure fonts with #font-face rule
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Medium"),
local("HelveticaNeue-Medium"),
url(HelveticaNeueMedium.ttf);
font-weight: bold;
}
ref https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
How to write a CSS font style for the following font:
font-family: Comic Sans MS CSS rule doesn't work.
The font may exist with different names, and not at all on some systems, so you need to use different variations and fallback to get the closest possible look on all systems:
font-family: "Comic Sans MS", "Comic Sans", cursive;
Be careful what you use this font for, though. Many consider it as ugly and overused, so it should not be use for something that should look professional.
The httpd dæmon on OpenBSD uses the following stylesheet for all of its error messages, which presumably covers all the Comic Sans variations on non-Windows systems:
http://openbsd.su/src/usr.sbin/httpd/server_http.c#server_abort_http
810 style = "body { background-color: white; color: black; font-family: "
811 "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; }\n"
812 "hr { border: 0; border-bottom: 1px dashed; }\n";
E.g., try this:
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
You need to use quote marks.
font-family: "Comic Sans MS", cursive, sans-serif;
Although you really really shouldn't use comic sans. The font has massive stigma attached to it's use; it's not seen as professional at all.
Use quotes to surround the font:
font-family: "Comic Sans MS";
That should solve the problem.