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;
}
Related
I'm building a email on html with the inline css. I need to build it with the google font Open Sans and using the light one with font-weight:300 for the text and the bold one with font-weight: 700 for titles.
I customed on googlefont website the url to have both particularities I needed like that :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">
The fact is that my email seems to apply by default the property 700 to all the page and can't find the 300 one if I put in my inline css the font-weight to 300.
However the 300 weight seems to be applied in a text, but I don't know why or understand the logic that could help me to apply a light weight whenever I want.
Does anyone know how if I can use Open Sans bold and light in the same page in a email html?
here is the codepen :
https://codepen.io/Katchou/pen/zzzLOy
You can use a different font-weight for the title and content
Refer the snippet
h3{
font-family:'Open-sans', sans-serif;
font-weight: 700;
}
p{
font-family:'Open-sans', sans-serif;
font-weight: 300;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<span>
<h3>Heading</h3>
<p>Content</p>
</span>
Or you can use
<span>
<h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
<p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
</span>
How's this? I can refine my answer if you add more information to the question.
EDIT:
You added a CodePen.
I got your title to show as Open Sans Light.
Check it out!
https://codepen.io/rickydam/pen/QggBja
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
#font-face {
font-family: 'Open Sans Light';
src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
</style>
<span>
<font face="Open Sans">
Hello world
</font>
<br>
<font face="Open Sans Light">
Hello world
</font>
<br>
<font face="Open Sans" style="font-weight:700">
Hello world
</font>
</span>
I have the below JSP code, which prints on page like
USE BY:APR/04/2017
Now I want it to be printed as
Use By:APR/04/2017
Though the value of label.global.useBy is "Use By" it is getting capitalized because of the style I have defined in CSS. I have done that to render the month in all CAPS. Else it was getting printed as
Use By : Apr/04/2017
Could you please suggest as to how can I Keep "Use By" as is and juts make month in caps, as:
Use By: APR/04/2017
<td class="contentArea"><bean:message key="label.global.useBy"/>: <bean:write name="details"property="expirationDate" formatKey="format.date.certificate" /></td>
Associated CSS
.contentArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
Thanks #Rahul Kapuriya,
I use SPAN tag inside TD like so,
<td class="contentArea"><bean:message key="label.global.useBy"/>: <span style="font-weight:bold; text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><span></td>
Thanks!
"You are welcome" -Rahul Kapuriya
You can use <strong> tag so you don't have to add style font-weight:bold
Like this:
<td class="contentArea"><bean:message key="label.global.useBy"/>: <strong style="text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><strong></td>
Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
<html><head></head>
<body>
<pre style="word-wrap:break-word;">
<HTML><head> <style>.header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt }.footer { color:black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-style: italic; } .body-header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight: bold; } .body-content { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; }</style></head><body><p class="header">This is to notify you that you have an account balance that is greater than or below the threshold viewable on Online Banking for Business. The requested details appear below. <br></p> <span class="body-header"> Account Number: </span><span class="body-content"> xxxxxxxxxxx </span><br><span class="body-header"> Balance Amount: </span><span class="body-content"> 110,xxx.95 </span><br><br><p class="footer">This e-mail and any attachments may contain confidential and privileged information. If you are not the intended recipient, please report to gtmxxxxdesk#xxx.com or call 1-800-xxx-6xx4, and please delete this e-mail and destroy any copies. Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal.<br></p> <p class="footer">Alert initiated: 08-Sep-2011 at 11:35AM Canada Eastern Time<br></p> </body></HTML></pre>
</body>
</html>
When I put the above html in a file, save it as .html, and open it in IE/FF, the Account Number: is not aligned proeprly to the left. Why is this?
I know there are multiple <html> , <head> and <body> tags, but for now, these are constraints i need to work with. i.e. I cannot get rid of them :)
EDIT: Also, on my browser, there seems to be 2 line breaks between the text:
Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal and the subsequent line : Alert initiated.
Although there is only 1 <br>
That's because you have spaces before the text. Inside a pre tag the spaces are interpreted as literal, and are not removed or collapsed.
As long as the HTML code is as broken as it is, you can't really expect any consistent result. Browsers will try to make the best out of it by simply ignoring some of the tags, and each browser will do it differently.
Aha! I have found the problem.
You need to remove the spaces between the </p> and <span> tags =).
Like so:
<br></p><span class="body-header"> Account Number:
Changing this:
</p> <span class="body-header"> Account Number:
to this:
</p><span class="body-header"> Account Number:
Seemed to work for me... jsFiddle
I seem to be having problems with declaring doctypes (possibly) in IE and FireFox.
This is the code that I'm having the issues seen in the screenshots with:
<div id="contact" style="position:absolute; left:81px; top:2440px; width:639px; ">
<span class="contact_header">Getting in touch is easy
</div>
<div style="position:absolute; left:80px; top:2500px; width:320px; ">
<br><span class="contact_title">email me:</span></br>
<br><span class="contact_links"><a class="white" href="mailto:hello#superallan.com?subject=Hello superallan!&body= "> hello#superallan.com</a></span></br>
<br><span class="contact_title">tweet me:</span></br>
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan"> #superallan</a></span></br>
<br><span class="contact_title">phone me:</span></br>
<br><span class="contact_links"> +44 (0) 7540 308 682</span></br>
</div>
<div style="position:absolute; left:400px; top:2500px; width:320px; ">
<br><span class="contact_title">write to me:</span></br>
<br><span class="contact_address"> 11 abbeyview</span></br>
<br><span class="contact_address"> crossford</span></br>
<br><span class="contact_address"> fife</span></br>
<br><span class="contact_address"> scotland</span></br>
<br><span class="contact_address"> united kingdom</span></br>
</div>
This is my current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>
This is the CSS for the section:
.contact_title {
font-family:"FairfieldLTStd55Medium", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_links {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_address {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
This is how it renders in Firefox and IE.
http://i.stack.imgur.com/l8h4q.jpg
When I change the doctype to strict it still looks fine in FF but IE makes the line-heights even greater.
Any ideas? Or possibly - how to fix it just for IE as it works fine in eveything else...
I note that you're using pt measurements for your font-size and line-height styles.
Note that pt is intended for use with printed pages, and is not rendered accurately on the screen. If you want a pixel-perfect accurate font size on the screen, use px instead. (You can also use em or % for relative measurements, but it looks like you're intending to use a fixed size measurement, so px is the one).
For more info, see this page: http://css-tricks.com/css-font-size/
To quote from the relevant section of the linked page:
Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes.
For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different.
...which does sound like exactly the symptoms you're seeing.
Hope that helps.