8 Replies - 2545 Views - Last Post: 21 June 2012 - 06:13 AM

#1 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,673
  • Joined: 24-August 11

Replacing <font> with CSS

Posted 31 May 2012 - 01:53 PM

I'm having to update some old HTML because our PDF conversion software doesn't recognize deprecated tags. I found a handy font size-to-em conversion chart (here if anyone's interested), so most of the <font> tags are taken care of. Does anyone know of a way to replicate <font size="+1"> with pure HTML/CSS (I really don't have the option of using Javascript to do this)?

NOTE: I know I can just play with it until the sizes match up...

Is This A Good Question/Topic? 0
  • +

Replies To: Replacing <font> with CSS

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4323
  • View blog
  • Posts: 12,106
  • Joined: 18-April 07

Re: Replacing <font> with CSS

Posted 31 May 2012 - 02:02 PM

Well of course you can just use the CSS "font-size" on the element to set its size. As for figuring out what size +1 is and such, this is dependent on the browser itself and there is no direct equivalents that work for all browsers. So the best you can do is match up the sizes by playing with them.

The link you provide is probably your closest to a match up starting point.

<span style="font-size: 2em;">This is font size 6 equivalent</span>



:)
Was This Post Helpful? 0
  • +
  • -

#3 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,673
  • Joined: 24-August 11

Re: Replacing <font> with CSS

Posted 31 May 2012 - 02:13 PM

That's what I was afraid of. It's not a big deal to go match them up, but I'm trying to leave everything as intact as possible. There's such an unruly mix-up of font-size: and <font size=""> that I'm honestly not sure what anything is inheriting. I've replaced most of the font tags with the font-size attribute, I just wanted to be lazy and use an incrementing function if available.
Was This Post Helpful? 0
  • +
  • -

#4 Maheadams  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 32
  • Joined: 28-July 11

Re: Replacing <font> with CSS

Posted 15 June 2012 - 02:57 AM

View Posth4nnib4l, on 01 June 2012 - 02:43 AM, said:

That's what I was afraid of. It's not a big deal to go match them up, but I'm trying to leave everything as intact as possible. There's such an unruly mix-up of font-size: and <font size=""> that I'm honestly not sure what anything is inheriting. I've replaced most of the font tags with the font-size attribute, I just wanted to be lazy and use an incrementing function if available.


Well,
Use CSS for this problem. don't give the size directly in to the HTML page.
Was This Post Helpful? 0
  • +
  • -

#5 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5780
  • View blog
  • Posts: 12,596
  • Joined: 16-October 07

Re: Replacing <font> with CSS

Posted 15 June 2012 - 04:36 AM

View Posth4nnib4l, on 31 May 2012 - 04:53 PM, said:

Does anyone know of a way to replicate <font size="+1"> with pure HTML/CSS


Almost. There is a font-size:larger you can use, which should be roughly equivalent to +1. There no plus +2 or anything, but you could tag twice if you had to have it.

Do not embed the style with style= for this. Rather, use class=.

The font-size: 2em thing in your link is misleading and fundamentally wrong. The C in CSS is for cascade, the F in font is for fixed. :P

Try this and you'll see what I mean.
<font size=3>- font size 3</font><br>
<span style="font-size: 1.0em">- font size: 1.0em</span><br>

<div style="font-size: 2.0em">
	<font size=3>- font size 3</font><br>
	<span style="font-size: 1.0em">- font size: 1.0em</span><br>
</div>



The only way to truly emulate font would be to have fixed sizes. This test worked for me:
<html>
<head>
	<title>Font Testing</title>
	<style type="text/css">
		.font1 { font-size: 7.5pt; }
		.font2 { font-size: 10pt; }
		.font3 { font-size: 12pt; }
		.font4 { font-size: 14pt; }
		.font5 { font-size: 18pt; }
		.font6 { font-size: 24pt; }
		.font7 { font-size: 36pt; }
	</style>
</head>
<body>
	<p>1<br/><font size="1">Testing</font><br/><span class="font1">Testing</span></p>
	<p>2<br/><font size="2">Testing</font><br/><span class="font2">Testing</span></p>
	<p>3<br/><font size="3">Testing</font><br/><span class="font3">Testing</span></p>
	<p>4<br/><font size="4">Testing</font><br/><span class="font4">Testing</span></p>
	<p>5<br/><font size="5">Testing</font><br/><span class="font5">Testing</span></p>
	<p>6<br/><font size="6">Testing</font><br/><span class="font6">Testing</span></p>
	<p>7<br/><font size="7">Testing</font><br/><span class="font7">Testing</span></p>
</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#6 teamfive  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 30
  • Joined: 03-May 12

Re: Replacing <font> with CSS

Posted 18 June 2012 - 06:29 AM

I dont really get what you mean...
So what you are asking is that you want the font size to increase by 1..?
It really got me confused.. xD
Was This Post Helpful? 0
  • +
  • -

#7 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,673
  • Joined: 24-August 11

Re: Replacing <font> with CSS

Posted 20 June 2012 - 03:51 PM

@teamFive - Kind of. I'm trying to replicate old behavior (<font size=+1>) with CSS. The HTML is written with Classic ASP and is strewn across half a dozen pages. I could just figure out the current font size, but even then, going from the CSS font-size: 8pt to font-size: 9pt doesn't do the same thing as <font size=+1>.

@baavgai - Unfortunately, I learned that the hard way. The sizes seemed to match up well enough in my nice, clean test page, but after the two hours of replacing the font tags with spans and divs, several of the font sizes were wonky. Thanks for your help! That url is now defavorited.

EDIT: Incidentally, why does the font-size: larger need to be in a class, rather than embedded?

This post has been edited by h4nnib4l: 20 June 2012 - 04:02 PM

Was This Post Helpful? 0
  • +
  • -

#8 baavgai  Icon User is online

  • Dreaming Coder
  • member icon

Reputation: 5780
  • View blog
  • Posts: 12,596
  • Joined: 16-October 07

Re: Replacing <font> with CSS

Posted 20 June 2012 - 04:45 PM

View Posth4nnib4l, on 20 June 2012 - 06:51 PM, said:

Incidentally, why does the font-size: larger need to be in a class, rather than embedded?


It needn't be. You can always style every element rather than placing the data in a class. However, it's less than ideal. It fails the basic programming DRY (don't repeat yourself) principal. Right now .font5 is "font-size: 18pt". You say style="font-size: 18pt" for every element you want this size. Later, you decide "font-size: 17pt" is a better choice. You change the class in one place, or every element.

More importantly, by using strictly classes, you allow any style sheet to be dropped in suit a given situation. Using the style tag simply limits your options.
Was This Post Helpful? 0
  • +
  • -

#9 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1181
  • View blog
  • Posts: 1,673
  • Joined: 24-August 11

Re: Replacing <font> with CSS

Posted 21 June 2012 - 06:13 AM

Oh, okay. I thought you meant that there was something specific to font-size: larger that caused some type of problems with cascading sizes, or something like that. I generally aim to avoid all inline styling, even if it means I have a bunch of CSS classes with only one attribute.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1