I got a webpage displaying english and hebrew information. The default english font is Verdana, and since Verdana does not support hebrew letters, the next option is Arial.
The problem is that 14px of english (Verdana) are slightly bigger than 14px of the hebrew (Arial).
How can I declare that I want 14px of Verdana, but 16px of Arial on the same element?
Is there any possible way of doing this ?
Thanks
Only if you surround either the english or hebrew with something like a <span> and then style the inline <span> accordingly
By different classes?
.english { font: 14px Verdana; }
.hebrew { font: 16px Arial; }
Well, it seems it can't be done... maybe with JS, but that's not the point.
We had to gave up on Verdana.
Related
I have a problem with fonts, because they don't render same on Windows and on OS X. On Windows, characters are vertically aligned in line, but on OS X, the characters are positioned much closer to top of the line.
I highlighted the text in screenshots so you can see the difference.
I am using font Gotham. Any ideas? Do I have to use browser-specific hacks or is it a font issue?
Link to JSFiddle: http://jsfiddle.net/wewo/myh4amud/
body {
font-family: 'Gotham', Arial, sans-serif;
background-color: #282828;
font-size: 14px;
font-weight: normal;
}
div {
color: white;
font-size: 5em;
padding-top: 15px;
padding-bottom: 6px;
line-height: 1em;
}
<div>3</div>
Thank you!
The problem is in process converting or generating webfont font.
I use tool Font Squirrel for convert correct, with this option EXPERT... :
If don't work with Google Font, download him and send for convert.
Problem with Win Ascent and HHead Ascent fields in font. Windows use Win,
mac - HHead. Use FontForge for edit this.
My problem is that font-weight in css doesn't apply on serbian latin characters (šđčćž ŠĐČĆŽ) which the font supports. for example:
#header h1{
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #FFF;
font-size: 50px;
padding-left: 20px;
padding-top: 20px;
letter-spacing: 1px;
text-shadow:1px 2px 3px black;}
shows all letters bolded except serbian latin characters ON SOME COMPUTERS. It works on mine (win8), but not on two of theirs (win8.1 and winXP). Same HTML, same CSS, all three of us using Chrome and connected to the Internet. Do you have any idea what could it be?
Have you done this? How to add multiple font files for the same font? none of the SVG fonts that I have seen have different font-weights and I've not yet run into directions for creating additional font weights in that font file type. Some font files appear to have font weights, so my guess is that the systems are choosing or ending up with a different font file type.
I am trying to simply make some text be italic with font shorthand.
So far I have this;
font: 36px italic normal Georgia;
But it is not working. The font definetely can be italic as if I set font-style: italic; it works.
You are having a wrong short hand syntax there, it should be
p {
font: italic normal 12px Georgia;
}
Demo
Reference :
Image Credits
As you see in the above image, there are some mandatory syntax for the font property to be declared and you need to maintain an order to make the shorthand work, since you were using 36px at the wrong place, it was breaking out the entire property.
Try this:
font:italic normal 36px Georgia;
Fiddle
yep c-link said it...you can't specify italics and then right after that put "normal"....
shorthand should follow this order:
font:{font-style font-variant font-weight font-size/line-height font-family}
NOTE: font-family and font-size must be specified....if not they will be put at default values...
If you write normal right after 36px italic it would be recognized or say override the italic by normal.
Use like this: font: italic normal 36px Georgia;
Using shorthand properties for font would be best result if you order like below
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family
I'm trying to adjust the font weight rather than just "bold". It appears to be doing nothing on Verdana text. Has browser support for this dropped or something?
<div class='business-hours'>
Toll free: (866) 528-4930 · Mon-Fri 9-5 EST
</div>
#hd .top-nav .business-hours {
text-align: right;
font-family: verdana;
font-weight: 600;
font-size: 10px;
color: #9ea3a0;
}
Numeric and other less usual font-weight properties (like semi-bold, book etc.) are supported very poorly across browsers, and AFAIK relevant only if the font itself provides support for the given value (i.e. has a explicit book or 900 font weight defined). So it's not really a sensible thing to use if consistency is desired.
See Are all css font-weight property's values useful?
And reference info at the W3C
Is it an H1 tag or something? Check that you don't have CSS overwriting your less specific rule. Otherwise Syntax is as follows:
<style>
.myboldtext
{
font-weight: 400;
}
</style>
<span class="myboldtext">This is my bold text</span>
400 for regular, 700 for bold.
Hope this helps!
Depending on parent font-styles it can be hard to see that text has in fact been bolded. For example:
p {
font-weight: lightest;
}
p span {
font-weight: bold;
}
and
<p>Hello, <span>world</span></p>
In many browsers its actually difficult to see any difference between the bold text and the regular body text.
Instead of just specifying font-weight: bold; try changing it to
font-weight: 700;
This will tell the browser to render the text with a heavier than even normal bold weight.
I noticed that in Chrome and Safari, my Courier text is tiny. In Internet Explorer and Firefox, the Courier text is comparable in size to the rest of my text. Is there something wrong with my CSS?
#article pre,
#article code {
display: block;
font-family: courier, monospace;
background: #f7f7f7;
padding: 0.6em;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #ddd;
margin: 0 0 1em 0;
}
Yeah, WebKit has separate default font size preferences for normal and monospaced fonts. When you use a font size derived from a relative font size (ie none of the text's ancestor elements have an absolute font size), you get different sizes for monospaced and normal fonts.
(This wouldn't necessarily be a bad thing, except that the default preference of much smaller monospaced fonts isn't really sensible and most users won't have changed it.)
I think this has changed over different versions; originally IIRC the different base font size for monospaced fonts was applied to any element whose font-family list had monospace in it. Now this behaviour only seems to happen when the font-family property is set to exactly monospace. Your example of courier, monospace doesn't trigger it for me; weirdly, neither does it happen with monospace, sans-serif, even though then the font will always be monospace and sans-serif will never be used. This behaviour matches Firefox.
You're probably not defining a font-size anywhere, so it's falling back to browser default.