font-weight property is not working in inline style - html

I am inserting html code through database, we don't have separate styling sheet. So we are using inline styling.
I used below code
<li style="font-family: Arial; font-size: 13pt;Color: #711984; font-weight: bold">
Cross-border Transfer
</li>
But font-weight property is not applicable, I don't see bold fonts.
I tried below code, it works but I don't think its recommended for best practices:
<b>
<li style="font-family: Arial; font-size: 13pt;Color: #711984;">
Cross-border Transfer
</li>
</b>
Pl

Related

Why does font css property remove bold weight?

I was tasked with removing unnecessary tags from computer-generated HTML that had a lot of useless tags (I only wanted to keep color/strong/em information). I came along something similar to this HTML:
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
For me (on chrome & firefox), it shows the bold text as bold and the not bold text as not bold, and I am confused as to why this is. In particular, this makes my task more complicated: I thought I could just remove the tags that do not have color/strong/em info, so change it to something like this:
<b>
<strong>bold</strong> not bold <strong>bold</strong> not bold
</b>
But now, all is bold instead of what it used to be.
I tried to find out what I could put in the FONT style to reproduce this behaviour:
Replacing Arial with foo kept the behaviour:
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
Switching the size and font changed the behaviour:
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
Any of the two values on their own did nothing much:
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
<div>Replacing `Arial` with `foo` kept the behaviour:</div>
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
<div>Switching the size and font changed the behaviour:</div>
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
<div>Any of the two values on their own did nothing much:</div>
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
Can anyone explain this behaviour, or at least tell me what styles I should look for that cancel outer styles?
I think I found the answer to my question, on the font css property documentation page. It states:
As with any shorthand property, any individual value that is not
specified is set to its corresponding initial value (possibly
overriding values previously set using non-shorthand properties).
Though not directly settable by font, the longhands font-size-adjust
and font-kerning are also reset to their initial values.
(My emphasis)
And a bit further down:
Initial value as each of the properties of the shorthand:
font-style: normal
font-variant: normal
font-weight: normal
font-stretch: normal
font-size: medium
line-height: normal
font-family: depends on user agent
So setting font: 20pt arial is equivalent to setting font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt;line-height: normal;font-family: arial
In particular, the font-weight is reset from bold (or whatever it was) to normal.
So to solve my underlying question, I should look for font tags that do not specify the weight.
P.S. The reason that font: arial 20pt did not have this behaviour is because this is not an allowed value for font, so it is ignored:
If font is specified as a shorthand for several font-related properties, then:
it must include values for: <font-size> <font-family>
font-style, font-variant and font-weight must precede font-size
font-family must be the last value specified.
And in font: arial 20pt the font-family is not the last value specified.
Fonts depend on your actual browser and actual font. ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Fonts have a particular weight which corresponds to one of the numbers
in Common weight name mapping. However some fonts, called variable
fonts, can support a range of weights with a more or less fine
granularity, and this can give the designer a much closer degree of
control over the chosen weight.
WHICH of the copyrighted or not fonts do you have? Depends. Browser, computer, CSS etc. but we cannot tell here.
Always specify a fallback (sans-serif in this case) This can all get a bit "tricky".
Bottom line: put all this in CSS and use classes so you can actually control it best and less HTML overall when you decide to change things Like pt is not normally great for visual but is for printed but not used much in modern HTML as a size. Now if you decide to change the size you have a lot of places to change it but if in CSS only one.
Now for some examples: (not all inclusive of the topic by any means)
.container {
font-weight: normal;
margin: 1em;
}
.container .fonty {
font-size: 20pt;
font-family: Arial, Helvetica, Verdana, "Gill Sans", sans-serif;
}
.heavy-one {
font-weight: 600;
}
.heavy-two {
font-weight: 900;
}
<div class="container">
<span class="fonty">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<div class="container">
<span class="fonty heavy-container">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<p>One with style in tags: (don't do this)
<span>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bold;">bold</span> not bold</span>
</span>
</p>
<p>Second with style in tags: (don't do this, bolder not great IMHO as it is one step heavier)</p>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bolder;">bold</span> not bold</span>
<p>Third with style in tags and <strong>: (don't do this) This also shows multiple similar font families and the fallback to "sans-serif" you should always include</p>
<span style="font-weight: normal; font-size: 20pt; font-family: Arial, Helvetica, Verdana, sans-serif;"><strong>bold</strong> not bold <strong>bold</strong> not bold</span>

Font size not changing in HTML

So, after I tried all the answers in the forums over here, the font size of my webpage won't change. Here's what I currently have:
<font size="40px" face="Didot">Hello</font>
Okay, it will set to 40px, but if I try to make another one using 20px it won't change the font size:
<font size="20px" face="Didot">World</font>
Whole code for those who want to check for themselves
<html>
<font size="40px" face="Didot">Hello</font>
<font size="20px" face="Didot">World</font>
</html>
<font> tag is deprecated. ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font )
Use CSS styling instead. See the example below.
.size40 {
font: 40px/1.5 Didot, serif;
}
.size20 {
font: 20px/1.5 Didot, serif;
}
<span class="size40">Hello</span>
<span class="size20">World</span>
If you are looking for ways to do inline styling you can follow this approach
<html>
<div style="font-size:40px; font-family:Didot">Hello</div>
<div style="font-size:20px; font-family:Didot">World</div>
</html>
But I would recommend to create a separate css file and define styles there. And import those styles in your html using script tags
As said in the previous answer the source is deprecated but if you insists on wanting to try you can use the following:
<font face="Verdana, Geneva, sans-serif" size="+7">Hello</font>
<font face="Verdana, Geneva, sans-serif" size="+4">World</font>
If it still doesn't work, use CSS:
<p>Hello</p>
<p>World</p>
⠀
p:nth-child(1){
font-family: Didot;
font-size: 40px;
}
p:nth-child(2){
font-family: Didot;
font-size: 20px;
}

Overwrite inline CSS Tag

After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :

What is wrong with the styling in these lists (HTML)

I've been doing the web course on Codecademy and I'm stuck on the "Styling the font!" task.
Any ideas what I'm doing wrong?
<li style= "font-family: Garamond; size:16px">This item is big Garamond.</li>
<li style= "font-family: Bodoni; size:12px;" >This item is medium Bodoni.</li>
<li style= "font-family: Futura; size:10px">This item is small Futura</li>
Thank you for all your help!
Remember that most computers only have a limited amount of fonts installed: http://web.mit.edu/jmorzins/www/fonts.html
It's best practice to specify fall-back fonts too incase the users computer doesn't have the first font specified e.g.
font-family: arial, helvetica, georgia, verdana, sans-serif;
So if the computer doesn't have arial installed it will go down the list until it finds one it does have installed and it will display that.
Also you've declared size wrongly. It should be...
font-size: xxx;
"size" should be "font-size".
<li style= "font-family: Garamond; font-size:16px">This item is big Garamond.</li>
<li style= "font-family: Garamond; font-size:16px;">This item is big Garamond.</li>
<li style= "font-family: Bodoni; font-size:12px;" >This item is medium Bodoni.</li>
<li style= "font-family: Futura; font-size:10px;">This item is small Futura</li>
Try this:
<li style = "font-size: 16px; font-family:Garamond">This item is big Garamond.</li>
<li style = "font-size: 12px; font-family:Bodoni">This item is medium Bodoni.</li>
<li style = "font-size: 10px; font-family:Futura">This item is small Futura.</li>
Defining font-family properties?
you could use multiple fonts like this font-family: arial, verdana, "Cooper Black";
Defining font size?
define like this font-size: 16px;
Alternatively you could define these font properties simultaneously like this font: 16px arial, verdan, "Cooper Black"; or font: 16px arial; or font: 16px/20px arial; below is line-height.

Link style not appearing on Lotus Notes 8.5 (Email client)

I am making a HTML email and testing using Litmus, however Lotus Notes 8.5 does not appear to be displaying any link styles. I am using pretty old school methods to make sure it works in older mail clients, but nothing seems to work. The links are getting styled in every other client, including Lotus Notes 7 & 8.
Here is the code:
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</a>
</font>
It could just be a bug with the app, however, it could also be me. I am not really sure what my other options are.
Put the <font> tag inside the <a> tag instead.
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</font>
</a>
Since <font> tags are inline elements, you can either nest them or wrap them around multiple blocks of text without affecting layout.
in the inline style, try adding "color: #00b4da; color: #00b4da !important;"
I seem to remember coming across something similar in hotmail and needing to do this but that was a while ago. Hope that helps.