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;
}
Related
For instance
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
div {
font:12px black "Open Sans";
}
Isn't accepted by chrome, using single quotes or no quotes doesn't help either. How do you use the font without writing an extra line for font-family?
Actually, the black is what makes that line of CSS invalid. font: 12px "Open Sans"; should work perfectly (and does when I try on Chrome). If you're trying to set font color, do it with the color: black; property.
Actually, Chrome doesn't recognise black, not 'Open Sans'. Use the weight measurement instead:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
div {
font: 800 12px 'Open Sans';
}
<div>
Some lipsum text right here.
</div>
black is not a recognised value for font:
The font CSS property is either a shorthand property for setting
font-style, font-variant, font-weight, font-size, line-height and
font-family, or a way to set the element's font to a system font,
using specific keywords.
If you wish to set the font colour, you must use color:
div {
color: #000; /*or color: black;*/
font: 800 12px 'Open Sans';
}
I'm using Wordpress with a custom genesis theme (and Bootstrap) with Google fonts (Open Sans).
Within the styling of my H2 tag I've added: font-weight: bold; however I'd like to increase the thickness of the bold whenever I use the font-weight: bold tag.
URL: https://www.moneynest.co.uk/how-to-budget/
Example H2 text (How to Budget - Table of contents).
You can use multiple text-shadows to make text bolder even if the font doesn't support the higher font-weights:
h2.section {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
font-weight: bolder;
}
You can use font-weight: 800 or font-weight: 900 which are the only values bolder then font-weight: bold
I've added a contact bar at the top but for some reason the numbers aren't on the same line.
http://puu.sh/kY9xG/6aed0786fc.png
css
.top_bar .tob_bar_right_col p {
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
It is correct only.It's coming due to the default font you used. Change the font type like below
.top_bar .tob_bar_right_col p {
font-family: "Times New Roman";
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
That's because of the font that you are using.
Some fonts uses the old way of placing the digits (text figures), with ascenders and descenders. The new way of placing the digits (lining figures) treats them similar to capital letters.
To get the new way of placing the digits you need a font that uses that form, for example Arial.
That's because of the font-family you are using. Some of them will make the numbers look weird. Just change you're font-family for that text and it should work.
Example:
.top_bar .tob_bar_right_col p {
font-family: "Arial", sans-serif;
}
Looks like it's a custom font, which appears different than other fonts.
You can check it e.g. by typing the same text in Gimp or Photoshop with the same font. It should output the same result.
Make sure, you're using the desired font-family.
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'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.