I used Arial italic on a website. I did it this way:
font-family: Arial;
font-style:italic;
font-weight:100;
In Photoshop Arial italic looks as thin as regular is. On the website it looks bold. I dont know if this is related to faux styles. If yes, how can I use the real Arial italic (In my fonts folder theres just one font, called Arial, no ArialItalic or something). If no, where does this come from and can I do something about it?
Here is a fiddle: http://jsfiddle.net/h84Vv/2/
Of course I don't know, if this is related to my system.
font-family: Arial;
font-style:italic;
font-weight:100;
try this:
http://jsfiddle.net/h84Vv/2/
If you want to text bold
Italic
Bold
Normally, the Arial font family contains a regular, italic, bold, and italic bold typeface, and with your settings, you get the italic typeface. Setting font-weight: 100 has no effect, since Arial has no typeface lighter than normal.
If you have removed the italic typeface, then browsers may use normal typeface as slanted (“fake italic”, though it’s not really italic but slanted, in a synthetic way). It should not cause the text to look bold. In the absence of more information (like a description of the font family under the name Arial in the system and some screen shots) it is impossible to analyze the issue further.
Related
I recently updated my body tag CSS from
font-family: Arial, Helvetica, san-serif;
to
font-family: Arial;
b.c. I assume that all modern browsers support Arial.
Is this O.K. ?
My understanding is that Helvetica & san-serif are only fallback fonts if Arial does not exist.
Font support is related to the user system, not browser. Arial is a pretty-standard font, available in all major Operational Systems.
Also, "sans-serif" is not a fallback font as you stated, but the typographic style of the font you intended to use.
Looking at your code:
font-family: Arial, Helvetica, san-serif;
It means: try use Arial first. If not available, Helvetica. If none of them is possible, then use any the default sans-serif font designated by the system.
For your specific case for extra security try using "Arial, sans serif" because in a worst-case scenario the browser will not mess your layout with a Serif font, which is the default font-family style applied.
[Before we start] I'm a Chinese user, and there are so many different weights of Chinese font. They are in the same font-family, but they didn't stay together like latin fonts, e.g., Huakang Chaohei(~Black) and Huakang Cuhei(~Bold).For that, I have to choose different font-family, rather than font-weight.
So this question happens so frequently to me when choosing different font-weight and font-family.
Just like the following picture, can I use font-family: "helvetica bold" in CSS? Or, use font-family: helvetica; font-weight: 600 to specify the bolder version of helvetica?
UPDATE:
Thanks all. So how to do with the name different than bold?
You would use the latter, like this:
font-family: helvetica;
font-weight: bold;
or you can use this:
font-weight: bold;
Note, you likely should include more fonts, as not all browsers will render helvetica, so you could use something like this:
font-family: Helvetica,Arial,sans-serif;
Edit to match the above edit:
he values you can use are normal (which is the default weight), bold, bolder, lighter. You can also use the values from 100 to 900, the higher being bolder. You can also use initial and inherit.
Note font-weight should work fine with Chinese; the fonts themselves are the ones you need to pay attention to.
How do I make the plus sign more bold? Bolding the "+" makes little to no difference compared to the text.
#plus_bold, #text_bold {
font-weight: bold;
}
http://jsfiddle.net/qe2em/
You can try "heavy Greek cross", http://www.fileformat.info/info/unicode/char/271a/index.htm
Or plus sign from FontAwesome: http://fortawesome.github.io/Font-Awesome/icon/plus/
Later one is more correct if you use it as an icon.
You can try to change the font-family
#plus_bold, #text_bold{
font-weight: 900;
font-family: "Lucida Grande", tahoma, arial, sans-serif;
}
here is how it looks JsFiddle
You can use a different font family. The design of glyphs in bold typefaces varies by font family. For example, in Times New Roman, the most common browser default font, the stroke width of bold “+” is almost identical with that of regular “+” (and typically the difference gets lost in rasterization) unless the font size is fairly large, 18pt or more. In Arial, there is a visible difference even in 11pt size.
The choice of fonts should of course be made after careful consideration of many aspects, and the boldness of a bold “+” is probably among the lesser details.
You can do font-weight:900; which is bolder than bold (700). 900 is the maximum; besides that, you'd have to actually change the font size.
I'm using a webfont that only supports most of the latin characters. However, the website is multilingual, russian is one of the languages. As you probably know, russian consists of cyrillic characters, which are then displayed in the secondary font-family. I found Verdana + font-weight:bold to be a good alternative.
However, font-weight bold needs to be related to Verdana only, so I can't just write it into the normal CSS, as the webfont should not be displayed bold. Here some tries that did not work:
CSS:
#font-face {
font-family: "some Webfont";
src:url('xyz.eot')
}
/* The font-weight won't work here */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana');
font-weight:bold;
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
.container {
font-family:"some Webfont", "Verdana-Bld";
}
So font-face is probably not the solution here, Verdana Bold seems to be a good way, however, it's not working when using it in normal CSS like this:
.container {
font-family:"some Webfont", "Verdana Bold";
}
I don't get it, when using #font-face, it finds and renders that font, but not when using as font-family?
Verdana Bold is really just a typeface of the Verdana font family, and it should be used by setting font-family: Verdana; font-weight: bold. In some cases, it is possible to use a typeface as if it were a font family, by declaring its name as the value of font-family, but this is browser-dependent and depends on the font, too; for Verdana Bold, the trick does not appear to work. The more complicated trick of using #font-face works for some browsers but not all, as you have seen; this even depends on the font name you use (e.g., the “full font name” Verdana Bold vs. the PostScript font name Verdana-Bold).
So a different approach is needed: try and find a font that covers all the characters needed. E.g., at Google web fonts, you can set “Script” to “Cyrillic” to find fonts that support Russian letters. Such fonts generally support Latin letters, too.
So The font-weight in font-face doesn't set the font-weight but is kind of a filter for browsers to decide if it is the right font to use. So when the browser looks which font to display it will choose the font-face where you set font-weight: bold just if your current text is bold and will take the other one in any other situation.
I think that it is actually possible to make one font bold and the other one regular just if you can call this in font-face directly. (so if you could have something like local('Verdana Bold'). Then just get rid of font-face:bold and it should work fine.
I am new to Google Fonts. I have gotten this URL from Google:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
My question is, how to use the various fonts I have selected. They are, as you can see, Ubuntu Normal 400, Ubuntu Normal 400 Italic, Ubuntu Bold 700, and Ubuntu 700 italic.
I have tried everything but can only use plain "Ubuntu" and nothing else.
Please help!
Here is me using italic version of this: http://jsfiddle.net/6wzuy/
font-family:ubuntu;
font-style:italic;
font-weight: 700;
The technique is to use CSS font-style Property
font-family: 'Ubuntu', Arial, serif; font-weight: 700;
EDIT: You have to include separate font libraries of italics and bolds in order for them to work as intended.
If you don't include the italic and bold versions, the browser will try to compensate, but will more than likely do a very poor job. More about this in this List Apart article.
If you want to add font styles to your fonts, always add the extra font styles to and specify it in your document. Especially in large serif font it can make a huge difference.
The Google code you use declares regular, italic, bold, and bold italic typeface (specific font) as members of the font (font family) “Ubuntu”. This implies that you use italic and bolding just as you do when using normal fonts.
You can use font-style: italic to request for italic typeface and font-weight: bold (or, equivalently, font-weight: 700) to request bolding. Note that many HTML elements imply italic or bold by default; for example, h1, strong, and th elements imply font-weight: bold.
There are other ways of using #font-face so that each typeface is declared as a font family of its own; FotSquirrel does that. But the approach applied by Google is more logical and compatible with the way fonts are generally used in HTML and in CSS.