How to Convert <Font Size="10"> to Px

How to convert font size= 10 to px?

<font size=1>- font size 1</font><br>
<span style="font-size:0.63em">- font size: 0.63em</span><br>

<font size=2>- font size 2</font><br>
<span style="font-size: 0.82em">- font size: 0.82em</span><br>

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

<font size=4>- font size 4</font><br>
<span style="font-size: 1.13em">- font size: 1.13em</span><br>

<font size=5>- font size 5</font><br>
<span style="font-size: 1.5em">- font size: 1.5em</span><br>

<font size=6>- font size 6</font><br>
<span style="font-size: 2em">- font size: 2em</span><br>

<font size=7>- font size 7</font><br>
<span style="font-size: 3em">- font size: 3em</span><br>

Converting em to px in Javascript (and getting default font size)

Edit: No, there isn't.

To get the rendered font size of a given element, without affecting the DOM:

parseFloat(getComputedStyle(parentElement).fontSize);

This is based off the answer to this question.

Edit:

In IE, you would have to use parentElement.currentStyle["fontSize"], but this is not guaranteed to convert the size to px. So that's out.

Furthermore, this snippet won't get you the default font size of the element, but rather its actual font size, which is important if it has actually got a class and a style associated with it. In other words, if the element's font size is 2em, you'll get the number of pixels in 2 ems. Unless the font size is specified inline, you won't be able to get the conversion ratio right.

Convert font tag (size attribute) to css

This isn't an easy question, and the real answer is IT DEPENDS.

See, the HTML sizes aren't a real size, but a somehow random size. The SIZE attribute allows you to set your font to an abstract size ranging from 1 to 7. The exact type size corresponding to each of these values is left to your browser. You can't be sure, for example, that SIZE=4 will give you a 12 point typeface; you know only that SIZE=4 will be bigger than SIZE=3.

Thus, what you see at 12px in one browser will be 13px or 14 px in another browser. There's a very interesting test made by SO user Eugene Yokota where you can see the approximate rendering of fonts translated to em:

<font size=1>- font size 1</font><br>
<span style="font-size:0.63em">- font size: 0.63em</span><br>

<font size=2>- font size 2</font><br>
<span style="font-size: 0.82em">- font size: 0.82em</span><br>

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

<font size=4>- font size 4</font><br>
<span style="font-size: 1.13em">- font size: 1.13em</span><br>

<font size=5>- font size 5</font><br>
<span style="font-size: 1.5em">- font size: 1.5em</span><br>

<font size=6>- font size 6</font><br>
<span style="font-size: 2em">- font size: 2em</span><br>

<font size=7>- font size 7</font><br>
<span style="font-size: 3em">- font size: 3em</span><br>

But this is still somehow subjective and of course doesn't answer the fixed (pixels) question. However, you can use the table above to translate to pixels as a guide:

Font=1: 10px
Font=2: 13px
Font=3: 16px
Font=4: 18px
Font=5: 24px
Font=6: 32px
Font=7: 48px

Now, the thing is that once you have your pixels in line, you really don't need to worry, so as long as you define something like "font-size:12px" all browsers will (should) render a font with 12px height

If you're interested in differences between Font Size tag rendering between browsers, yu can take a look to this link with may examples

Em unit in CSS doesn't change font-size value as expected, why?

em value will be related to it's immediate container otherwise known as the parent. I think you'll probably want to use rem which is always related to the font-size of the <html> or what's called the document root.

In this Snippet, the em are rem. There's two buttons +/- which will modify the font-size of document root.

SNIPPET

$('#in1, #in2').on('click', function(e) {  var cur = $('#hook').css('font-size');  var res;  var mod = $(this).data('v');    res = parseFloat(cur) + parseFloat(mod);  $('#out1').val(res);
  $('#hook').css('font-size', res);});

/* general */
html {  font-size: 16px;}body {  margin: 0;  font: 100%"Open Sans", sans-serif;  color: #7f7e7d;}header,main,footer {  font-size: 1.171875rem;  /* 18.75px / 16px */}h1,h2,h3,h4,p,blockquote,figure,ol,ul {  margin: 0;  padding: 0;}main {  display: block;}h1 {  font-size: 4rem;}h2 {  font-size: 3.3333333333rem;  /* 62.5px / 18.75px */  font-weight: 400;}h3 {  font-size: 1.5557333333rem;  /* 29.17px / 18.75px */  margin: 1.1733333333rem 0;  /* 22px / 18.75px */  font-weight: 400;}p {  font-weight: 300;}a {  color: inherit;  text-decoration: none;}img {  max-width: 100%;  height: auto;  border: 0;}.container {  max-width: 960px;  margin: 0 auto;}.menu {  list-style: none;}.menu > li {  float: left;}.hide {  display: none;}.cf:before,.cf:after {  content: "";  display: table;}.cf:after {  clear: both;}/* header */
header {  background: #000;  color: #ccc;  font-weight: 300;}header .container {  position: relative;  /* kvoli jazykovemu menu, ktore bude absolute */  z-index: 1;}/* logo */
#logo {  float: left;  font-size: 0.48rem;  /* 9px / 18.75px */  font-weight: inherit;}#logo a {  display: block;  text-transform: uppercase;}.logoPic {  display: inline-block;  text-indent: -9999px;  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) left center no-repeat contain;  width: 148px;  /* logo width */  line-height: 7.6666666666666666666666666666667rem;  /* 69px / 9px */  padding-right: 18px;  /* priestor pre lomitko */  position: relative;}.logoPic::after {  content: "/";  position: absolute;  text-indent: 0;  right: 3px;  font-size: 40px;  /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */  color: #ffcc00;}/* navigation */
nav {  float: right;}nav a {  display: block;}#nav > li > a {  line-height: 3.68rem;  /* 69px / 18.75px */}#nav > li {  position: relative;  margin-right: 1.2266666666666666666666666666667rem;  /* 23px / 18.75px */}#nav > li:last-child {  margin-right: 0;}#nav > li:hover:not(.sub) > a {  color: #bf9900;}#nav > li.sub:hover > a::before {  content: "";  position: absolute;  width: 60%;  margin-left: 20%;  margin-right: 20%;  height: 0.26666666666666666666666666666667rem;  /* 5px / 18.75px */  background: #ffcc00;}#nav > li.sub:hover .submenu {  visibility: visible;}/* navigation submenu */
.submenu {  position: absolute;  top: 3.7866666666666666666666666666667rem;  /* 71px / 18.75px */  left: -1.0666666666666666666666666666667rem;  /* 20px / 18.75px */  background: #000;  list-style-type: none;  visibility: hidden;  transition: visibility .15s;}.submenu a {  padding: 0.55626666666666666666666666666667rem 0.67866666666666666666666666666667rem;  /* 10.43px / 18.75px | 12.725px / 18.75px */}.submenu li:hover {  color: #bf9900;}/* languages */
#languages {  position: absolute;  right: -9.2266666667rem;  /* 173px / 18.75px */}#languages a {  display: inline-block;  line-height: 3.68rem;  /* 69px / 18.75px */}#languages li::after {  content: "/";  padding: 0 0.16rem;  /* 3px / 18.75px */}#languages li:last-child::after {  content: "";  padding-right: 0;}#languages li:hover a {  color: #bf9900;}/* media queries */
@media (max-width: 1365px) {  body {    font-size: 85.333333331%;  }}#fixed {  position: fixed;  top: 10px;  max-width: 35ex;  margin-bottom: 20px;  z-index: 80;}#in1,#in2,#out1 {  position: fixed;  top: 10px;  max-width: 3.5ex;}#in2 {  left: 10.5ex;}#out1 {  left: 3ex;  z-index:11111;  font-size:18px;  color: black;  text-align: center;}#out1::after { content:'px' }

<!DOCTYPE html><html id='hook'>
<head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head>
<body>  <header id='fixed'>    <button id='in1' data-v='1'>+</button>    <output id='out1'></output>    <button id='in2' data-v='-1'>-</button>  </header>  <br/>  <br/>  <br/>  <header>    <div class="container cf">      <h1 id="logo">    <a href="#">     <span class="logoPic">Marek Petrik</span>Professional Photographer    </a>   </h1>
      <nav>        <ul id="nav" class="menu cf">          <li><a href="#aboutMe">O mne</a>          </li>          <li><a href="#">Služby</a>          </li>          <li class="sub"><a href="#">Portfólio</a>            <ul class="submenu ">              <li><a href="#">Svadba</a>              </li>              <li><a href="#">Modeling</a>              </li>              <li><a href="#">Príležitostné</a>              </li>              <li><a href="#">Architektúra</a>              </li>              <li><a href="#">Príroda</a>              </li>              <li><a href="#">Deti</a>              </li>            </ul>          </li>          <li><a href="#">Referencie</a>          </li>          <li><a href="#">Cenník</a>          </li>          <li><a href="#">Kontakt</a>          </li>        </ul>      </nav>
      <ul id="languages" class="menu">        <li><a href="#">SK</a>        </li>        <li><a href="#">EN</a>        </li>        <li><a href="#">DE</a>        </li>      </ul>    </div>  </header>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></body>
</html>

CSS: 100% font size - 100% of what?

The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.

I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Now the font-size of all my HTML tags will inherit a font-size of 14px.

Say that I want a all divs to have a font size 10% bigger than body, I simply do:

div {
    font-size: 110%
}

Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.

If I want the font-size of all div's to be 10% smaller, I do:

div {
    font-size: 90%
}

This will make all divs have a font-size of 12.6px.

Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.

This can help in the explanation:
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

vw (% of the viewport width)
vh (% of the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

How to change correctly font-size:x% with pt or px?

You cannot, any more than you can convert meters to seconds.

If you know the font size of the parent in element in some unit, then you can calculate the computed value corresponding to font-size: 65% in that same unit by multiplying the numeric value of the parent font size by the number 0.65. But this would just mean calculating the value in a specific situation, not generally converting the relative value 65% to an absolute value.

How to Convert <Font Size="10"> to Px