Looks like firefox have a troubles in understanding what i want from him. Chrome understands me very well.But firefox is declines to understand that want "normal" fonts when i write (font-face:normal) to a property.It makes my block "ligter" like font in parent block.WHY!?!?!?
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-R.ttf');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-B.ttf');
font-weight:bold;
font-style:normal;
}
#font-face{
font-family:Myriad;
src:url('../fonts/MyriadPro-L.ttf');
font-weight:lighter;
font-style:normal;
}
It is best to use the numerical weights of the font faces i.e font-weight:200 etc since each browser renders fonts differently, therefore you will see a bigger difference when loading bold/lighter as compared to 600/400 etc.
Find out which weights each fonts supports and use the numerical value.
Change the font family names to represent the different font weights eg Myriad Light, Myriad Bold, Myriad for more readable css and less confusion.
The value lighter is invalid for the font-weight property inside a #font-face rule (as the W3C CSS Validator would tell you). Use a numeric weight instead. The proper value should be found in the information provided by the font vendor.
Related
For a project I download a template. In its style.css font family was defined as
body {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
arial , sans-serif, Helvetica Neue are different font families then why font-family in css is defined as above.
Not all browsers support all the fonts.
So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.
You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.
FROM MDN
The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a #font-face at-rule.
Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a #font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.
It is a kinda like a backup if the browser won't support the first font it jumps
to the second
From W3 schools
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names:
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
http://www.w3schools.com/cssref/pr_font_font-family.asp
I have created a landing page and needed a headline to be Avenir font. I got this to render properly in Chrome, but it does not work for any other browser. Is there something that I am missing?
CSS
h1,h2,h3,h4,h5, .section h2 {
margin:0;
padding:0;
color:#c41230;
font-family: AvenirLT-Black;
font-weight:normal;
}
HTML
<div class="ten columns title">
<h1 style="font:AvenirLT-Black">Additional Information</h1>
</div>
The font-family value is passed on through to the OS font subsystem.
Windows has two different font subsystems: DirectWrite and GDI. Chrome uses the older GDI; Firefox and IE use DirectWrite.
GDI doesn't have a way to represent more than two different font weights per family, so fonts that are extra-bold or extra-light get mapped to different family names, typically suffixed with "Black" or "Light" or "ExtraLight". DirectWrite, on the other hand, can represent multiple weights per family. So chances are DirectWrite is seeing your font as a font with the family name "AvenirLT" and an extra-bold font weight. So you want to do something like this:
font-family: AvenirLT, AvenirLT-Black;
font-weight: 900;
My text that is supposed to be Arial Black is not working on Firefox. It's just displayed as a regular text. So I used Arial font with the Strong tag. I can't make a difference between the way they look. Is there anything I should worry about?
Thank you
EDIT
In this particular case I can't use CSS to do it so that's how i did it:
<font face="Arial Black, Arial, sans-serif"> <strong>Want an undergraduate course with more opportunity for hands-on practice? </strong></font>
Thanks for all the answers and explanations, I believe the strong tag is not wrong here as this is the most important part in the whole message. The visual difference wasn't noticed by anybody, that's confirmation enough for me.
I posted in jsfiddle and it surprised me the strong tag didn't add the bold effect i was expecting! The b did. You can clearly see the difference there! Thanks for that suggestion!
With regard to the question title (as the question text seems to ask differently):
The <strong> tag carries a semantic meaning. Citing MDN on this
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
So in the first place you should use this tag so mark up content, that you want to emphasize and not to get text marked bold.
Most browsers, however, will implement that emphasizing as just bold printed text.
If you just want to have bold text, use the respective CSS for it!
font-weight: bold;
<strong> holds a certain semantic meaning (along the lines of "more important"), and as such should be avoided purely to style something. If you want to "bold" the text, just add font-weight: 700.
Or you know, fix the reason Arial Black isn't working :P It may be that you didn't add speech marks around Arial Black.
font-family: Arial;
is completely acceptable, but
font-family: Arial Black;
is not. Make sure you have
font-family: "Arial Black";
Yes, there is a considerable difference in using Arial Black vs. Arial with the strong element. I will answer in CSS terms, substituting the CSS setting font-weight: bolder for HTML strong markup. (It's really irrelevant here whether you call for bold face directly in CSS or indirectly with HTML markup that implies a certain default setting.)
It is not clear what you mean by “Arial Black is not working on Firefox”.
The most logical CSS code for the purpose would be:
font-family: Arial; font-weight: 900;
This asks for the boldest available font in the Arial font family; that’s Arial Black when available, or else Arial Bold. Firefox does not seem to support this quite consistently, but many browsers have even more serious problems with font heights. (E.g., Chrome shows weight 600 as bolder than 700.)
In practice it is safer to use the old kludgy way, which refers to a specific font (typeface) as if it were a font family:
font-family: Arial Black;
For example, on IE 8, this is the only way to get Arial Black, whereas IE 9 supports the logical way, too (in “Standards Mode”).
If you use set the font to Arial and font weight to bolder, you get Arial Bold. If you set font-family: Arial Black and font-weight: bolder, you get Arial Black, because there is no bolder font. And Arial Bold and Arial Black are very different.
It’s impossible to say what went wrong in your first attempts, as you did not post the actual code used.
I think you would receive the same effect, however I would recommend using CSS styling instead of using the strong tag.
.arial-black{
font-family: Arial;
font-weight: bold;
}
There is no visual difference between the <strong>, <b> and font-weight:700|bold;.
However <strong> is used by screen readers (for the blind and partially sighted) to put emphasis on the text... therefore using a "bold" font will not result in the same thing for screen readers.
If you don't want to "emphasis" the text for screen readers, then I would recommend you use the <b> tag instead.
<strong> tag does not support all browsers, as Arial and Arial black is concerned both are different in size or weight you can say.
So answer to your question is yes.
Using the font Arial Black in a web page only works for the users that actually have that font installed. (Of course, using Arial also only works on systems that have that font).
Arial Black is not just a bold version of Arial. Although similar, Arial Black has a different look than the bold version of Arial:
Arial, bold
Arial Black
You should use a fallback font for all fonts that you use, so that the browser knows what to use if that specific font isn't available, however it's tricky to use a font that is bold by default, as you can't specify Arial bold as fallback for Arial Black. You would have to make do with using Arial as fallback:
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
You could use a #font-face rule to force Arial Black whenever the bold font-weight of Arial is used:
#font-face {
font-family: Arial;
/* You can add other common names using comma-separated local definitions here */
src: local('Arial Black');
font-weight: bold;
}
#font-face {
font-family: Arial;
src: local('Arial');
font-weight: normal;
}
Now, whenever Arial is set as the font for an element and the calculated font weight is bold (which is what user agents set for the string tag in their html.css definitions), Arial Black is used instead.
strong tag basically creates your text in bold. For your case it makes no difference. But it will create a difference if your font is different and you are using "strong"
My HTML text is just like this:
<p>abcdefghijklmnopqrstuvwxyz</p>
What I want is to display a-n using "Times New Roman", and display o-z using "Courier New", and this should be done using CSS, say, with no change to the HTML text.
Simply stated, I want CSS to automatically choose the specified font corresponding to which character it is.
a-n should be displayed using "Times New Roman";
o-z shoule be displayed using "Courier New".
Is there any way to accomplish this?
If this problem can be solved, another problem can be solved: display different language using different font.
Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
BTW, more info about this from http://24ways.org/2011/unicode-range
Live example: http://jsfiddle.net/jfcox/3LQyr/
<style>
#font-face {
font-family: Foobar;
src: local('Times New Roman');
unicode-range: U+61-6E;
}
#font-face {
font-family: Foobar;
src: local('Arial');
unicode-range: U+6F-7A;
}
body{
font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>
If the characters belong to different writing systems, such as Latin and Hebrew, or Cyrillic and Greek, browsers often automatically use different fonts for them. However, this only happens to the extent that the page does not specify fonts, i.e. this relates to default fonts only, and the fonts used are determined by browser defaults and browser settings controlled by the user.
Although the technique described in JayC’s answer gives a partial solution, you get much better browser coverage by distinguishing the texts in different languages in markup. In a bilingual document, it suffices to use markup for texts in one of them (the one used less, for practical reasons). Using class as in gutch’s answer gives best coverage, but nowadays support to language selectors in CSS is so widespread that you might consider using the more logical lang attribute instead, e.g.
<h1>Hello − <a lang=ru>Привет</а></h1>
Then you would use rules like
[lang=ru] { font-family: ...; }
(My example uses an <a> element effectively as a shorter variant of <span>. Formally, this is possible only when the text is not inside an outer <a> element.)
However, for visual style, just the opposite of font selection by language would be needed. It really looks odd if the “e” in “Hello” is different from the Cyrillic “е” in “Привет” on the same line. It is almost always better to use the same font for all languages in a document, if possible. This means selecting a font that works for all of them.
You can't use CSS to change the font of particular characters as you describe, because the CSS selectors don't select individual characters — they select HTML elements.
So you would need to create elements around the blocks of text that need specific fonts. Ideally you would do that in server-side code, though I don't know whether that's practical for you. Your server would need to output HTML like this:
<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p>
Then you apply the fonts as appropriate in your CSS:
.languageOne { font-family: "Times New Roman", serif; }
.languageTwo { font-family: "Courier New", monospace; }
Introducing new font in CSS with #font-face as
#font-face{
font-family:'myCustom';
font-style:normal;
font-weight:400;
src:local('myCustom'),
local('myCustom-Regular'),
url('myCustom.woff') format('woff')
}
and defining the font as
font-family: myCustom, Tahoma, Verdana, cursive;
However, I have two problems:
Until download my custom font, it will not show the second (alternative font), and the text will be blank.
If for any reason the visitor browser does not download my custom font, it will not display any text.
How can I display the alternative font until availability of my custom font?
What I expect to happen is that the first available installed font, among those listed in the font-family list, will be used. If this does not happen, please post a URL for inspection.
But you may wish to consider the list of font families you use. The odds are that if Tahoma and Verdana would be acceptable, cursive would not be; a normal generic fallback font in this case would be sans-serif.