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.
Related
I am trying to add css to my FullCAlendar 5 Events using 'classNames:'; e.g.,
classNames : cssItalic,
When I define the cssItalic css as:
.cssItalic {
font-style: italic;
font-weight: bold;
}
It works. However, when I change it to:
.cssItalic {
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
The underlining is not done (i.e., bold and italic work).
So, what css can be used with FullCalendar 5?
After further testing I found the the underline is shown in the list view however, not in the month, week and day views.
If you inspect the elements you're trying to underline, you'll notice that they have a style definition already:
a:not([href]):not([tabindex]){
color: inherit;
text-decoration: auto;
}
Your problem is that .cssItalic is not as specific as the existing selector that sets text-decoration. This is why bold and italics still work, but underline does not for these elements.
Your two options are: make the selector more specific, or use !important for the text-decoration rule.
font: SemiBold 14px/17px Basier Square;
I am trying to copy styles of a text from Adobe XD and it shows me font-size as above, I am confused, should I interpret it as 14px or 17px?
Answer: Font-size = 14px, Line-Height = 17px;
It is not Adobe specific, it's simple HTML definition
Reference: From Mozilla Docs, we can understand that
If font is specified as a shorthand for several font-related properties,
then-->
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font: SemiBold 14px/17px Basier Square;
That would be
.element {
font-family: 'Basier Square';
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 17px;
}
I ask this because when I try to create a CSS font stack for multi-language content, such as English and Chinese, the final rendering is affected by the first font in the stack (usually Latin ones, since most Chinese font comes with Latin support).
See this Codepen, for example.
div.a p {
overflow: hidden;
}
p {
background-color: red;
border: 1px solid black;
display: inline-block;
}
.chinese-only {
font-family: "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.english-chinese {
font-family: "Avenir Next", "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.chinese-english {
font-family: "Hiragino Sans GB", "Avenir Next", sans-serif;
font-size: 24px;
line-height: 48px;
}
What I am seeing:
Since Chinese glyphs only appear in the Hiragino Sans GB, I expect all Chinese blocks to use the same line height. But they are apparently affected by adding the Avenir Next font at the top of the stack.
Since both Firefox and Chrome on OSX renders my example the same, I wonder if the CSS specification mentions anything about this. CSS 2.1 fonts spec doesn't appear to state what to do with line height when you fallback on missing glyphs.
Updated: Safari does render differently, but unfortunately the difference is due to overflow: hidden, not glyph fallback. My updated example may show this a bit clearer.
On Chrome and Firefox
On Safari
And if you are really into font-related headaches, try this example showing different font stacks, and see how they differ on each browser.
This is pretty much going to come down to the user agents. Any time the CSS specification says, “not defined by this specification”, that’s code for “we’ll let browsers do whatever they think is best and then try to get them all to behave consistently after a few years of doing it differently”.
Furthermore, the latest CSS Inline Layout Module states right at the top of Section 1 (Line Heights and Baseline Alignment):
This section is being rewritten. Refer to section 10.8 of [CSS21] for the normative CSS definition or the 2002 Working Draft if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)
That’s from last month. So, you know, good luck and Godspeed, basically.
Interestingly, I see a different result in Safari 6.2.2 than you posted:
If there’s a difference between that and the latest Safari, you might be able to track down a bugfix between the two versions that explains why it changed.
I am trying to change the font family of an aside tag. I created the following section in my css file -
.instruction {
color: brown;
font: verdana;
}
and assigned aside, class = instruction. But it does not work. I have also tried using aside as an element in CSS to assign the properties like
asign {property: value;}, but no effect.
But if I only use color property, then it works. So is there any issue with assigning font family and related properties to aside tag? I am using Chrome 28.
Use font-family: verdana; instead of font: verdana and when you are using font shorthand properties care of the following order:
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family
And also you cannot apply just one value in shorthand method. For font, it should at least two values for eg. font-siz and font-family
image source
When using the font shorthand you must specify at least a font-family and a font-size - not just one or the other - the exception is when using system fonts - e.g. font: menu;
Also note that the font-family property must appear after font-size.
.instruction {
color: brown;
font: 1em verdana;
}
http://jsfiddle.net/GRBRU/
Either
{
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
Or:
{
font: 13px bold Verdana;
}
I use custom font in my CSS with this method:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot');
src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.gabriola {
font-size: 20px;
line-height: 20px;
height: 20px;
background: red;
}
<div class="gabriola">Some texty text here</div>
Each browser renders this fonts by it's own way with vertical offset top and bottom like this
What am I doing wrong? Thanks
I know it's been 5 years since the OP asked the question, but I found this great technique on getting text baseline-aligned correctly.
Basically, the text container must be an inline-block with line-height: 0;
Then, you create an inline-block pseudo-element and set its height according to the line-height you wanted:
span {
font-size: 2em;
background: red;
}
span.baseline-align {
vertical-align: baseline;
}
span.true-baseline-align {
display: inline-block;
line-height: 0;
}
span.true-baseline-align::after {
content: '';
display: inline-block;
height: 1em; // this is where you control line-height
}
<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>
http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/
It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.
Just to be sure, explicitly set vertical-align: baseline.
The different files (.eof, .woff, .ttf) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.
Not sure if having two src calls is messing things up, but you can try eliminating the second one:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot'),
url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
These are all mere guesses. You will have to test #1, 3. If the issue is #2, I'm not sure there is an elegant solution.
There is, of course, the caveat on this site:
Keep in mind that font rendering can vary widely across browsers and
operating systems. Many developers have experienced such poor results
from Windows and Internet Explorer that they avoid using custom fonts
altogether. Always be sure to examine your results closely on all the
browsers that you can to decide if the quality is acceptable.
Update
This post gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:
If you downloaded the kit, you might try regenerating the font with
the generator. We make periodic adjustments to the generator that
might improve the hinting or rendering of the font.
But he also confirms,
Not to pass the buck, but the most common cause is a bad original
font.
Which goes with my point #2.
I had the same problem and the solution was to reconstruct the font with the properties of the original without changing anything in a new file with Hight logic font creator, the font is unchanged and equal to the original problem is corrected and aligned to the perfection in all browsers including ie6, was the work of a few hours but this is the result in case you need some user.
http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip
This is the solution if anyone has the issue and do not want or cannot reconstruct the font:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
This prop will adjust the vertical ascend property when the font is imported.