What's the difference of space and comma in CSS property value(not for selector)?
font:bold 60px helvetical, arial, sans-serif;
I just had a test, it has different effect when change comma to space or vice versa in above style, so I want to know when to use space/comma?
Space:
Each value make different function. For example:
font: bold 60px helvetica, arial, sans-serif;
bold = font-weight: bold;
60px = font-size: 60px;
bold do the weight and 60px do the size, these two are different from each other.
Comma:
helvetica, arial, sans-serif = font-family: helvetica, arial, sans-serif;
Values in comma do the same function. They all change font-family.
In this case:
If helvetica it's not supported then loads arial, if arial it's not supported then loads sans-serif.
Using fonts with two words:
If you use fonts that contains two words and have spaces like Roboto Slab.
For these fonts you have to put them on double quotes "roboto slab".
Example: font: bold 60px "roboto slab", arial, sans-serif;
Related
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
i noticed an issue when using Less with font shorthand
.font(#weight: 300, #size: 22px, #height: 32px) {
font: #weight #size/#height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
the above fails with
this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. #highlight: #cb1e16;
2. #shade1: #cb1e16;
when i split the properties up it works
.font(#weight: 300, #size: 22px, #height: 32px) {
font-weight: #weight;
font-size: #size;
line-height: #height;
font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
i think its because of the slash / thats causing the problem, i think since Less can do calculations, eg. 2px + 5 = 7px its trying to do a divide?
Just ran into this issue, the escape function (for less.js anyway) is:
e()
Like this
font: #weight #size e('/') #height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
The forward slash / character is causing the LESS compiler to divide your font-size by your line-height. You can:
Separate your CSS into non-shorthand, separate rules
font-size: #size;
line-height: #height;
Escape some or all of your LESS font shorthand rule. The slash / itself is the best part to escape. You can use the e, e("/") escape syntax, or the newer, better documented tilde-quote ~"/". You can also use the LESS string interpolation #{} syntax to insert your variables.
Try this:
font: #weight #size~"/"#height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
Or this:
font: #weight ~"#{size}/#{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
LESS 1.4 and above now have a "strictMath" option that solves the ambiguity between and font shorthand. In 1.4 it is disabled by default to make transitioning easier, but in later versions it will be enabled by default.
See the 1.4 notes here
When strictMath is enabled, all math operations must be wrapped in parenthesis (10px / 5px) and the forward slash in the font short will not be interpreted as division.
How can I apply !important to the following syle:
font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
I've tried this, but doesn't work:
font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif !important;
Select the children within the parent container with a wildcard (*):
div * {font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif !important; }
http://jsfiddle.net/4d3K4/50/
The code is fine. It would vary depending on which elements you are giving the property to. It's better if you use specific selectors such as classes:
http://jsfiddle.net/4d3K4/
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 have my fonts set in my style.css:
font-family: "Arial, Verdana, sans-serif";
But my website still seems to use sans serif. What is the problem here?
The commas in your CSS font-family specification need to be outside the quotes.
For example:
font-family: "Arial", "Verdana", sans-serif; /* And you should really
omit the quotes if it's only one word */
Not
font-family: "Arial, Verdana, sans-serif";
Otherwise, the CSS parser thinks you're looking for a font called "Arial, Verdana, sans-serif", which clearly doesn't exist.
Try removing your "" from the font-family definition:
font-family: tahoma, sans-serif;
Like that. Only put the " around when you have multiple words such as
font-family: "mutiple word font name",tahoma, sans-serif;