How to Get Font Size in Html

How To Get Font Size in HTML

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use window.getComputedStyle.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

Specifying Font and Size in HTML table

Enclose your code with the html and body tags. Size attribute does not correspond to font-size and it looks like its domain does not go beyond value 7. Furthermore font tag is not supported in HTML5.
Consider this code for your case

<!DOCTYPE html>
<html>
<body>

<font size="2" face="Courier New" >
<table width="100%">
    <tr>
        <td><b>Client</b></td>
        <td><b>InstanceName</b></td>
        <td><b>dbname</b></td>
        <td><b>Filename</b></td>
        <td><b>KeyName</b></td>
        <td><b>Rotation</b></td>
        <td><b>Path</b></td>
    </tr>
    <tr>
        <td>NEWDEV6</td>
        <td>EXPRESS2012</td>
        <td>master</td><td>master.mdf</td>
        <td>test_key_16</td><td>0</td>
        <td>d:\Program Files\Microsoft SQL Server\MSSQL11.EXPRESS2012\MSSQL\DATA\master.mdf</td>
    </tr>
</table>
</font>
<font size="5" face="Courier New" >
<table width="100%">
    <tr>
        <td><b>Client</b></td>
        <td><b>InstanceName</b></td>
        <td><b>dbname</b></td>
        <td><b>Filename</b></td>
        <td><b>KeyName</b></td>
        <td><b>Rotation</b></td>
        <td><b>Path</b></td></tr>
    <tr>
        <td>NEWDEV6</td>
        <td>EXPRESS2012</td>
        <td>master</td>
        <td>master.mdf</td>
        <td>test_key_16</td>
        <td>0</td>
        <td>d:\Program Files\Microsoft SQL Server\MSSQL11.EXPRESS2012\MSSQL\DATA\master.mdf</td></tr>
</table></font>
</body>
</html>

how get current text size in css

I would seek a different and much simpler approach.

p.myText {  font-size: 16px;}
.increaseSize {  font-size: 1.5em}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

How to get the font-size in JS of a child node from the parent node?

You could do something like the following to get the child nodes instead.

var a = document.getElementsByTagName('a');for (var i = 0; i < a.length; i++) {  let node = a[i];  let children = node.childNodes;  for (child of children) {    if (child.nodeType === 1) {     node = child;     break;    }  }  var style = window.getComputedStyle(node, null).getPropertyValue('font-size');  var fontSize = parseFloat(style);  console.log(a[i].textContent + "  | font-size:" + fontSize);  console.log("-----------");}

a {  font-size: 40px;}
h2 {  font-size: 20px;}
p {  font-size: 10px;}

<a href="#">First test</a><a href="#">  <h2> Second test</h2></a><a href="#">  <p>Third Test</p></a>

Find the absolute font-size of a relative font-size

In Chrome Dev tools

F12 > Elements > Computed > font-size

A value in pixels will be displayed.

Increment the font size of entire html document(all element)

You can use this :

function incrAllFontSize(){
  $("*").each(function(index, elem){
    var $this = $(this);//caching for perf. opt.

    var curr = $this.css("fontSize");//get the fontSize string
    if(curr != "" && curr != undefined){//check if it exist
      curr = curr.replace(/px$/, "");//get rid of "px" in the string

      var float_curr = parseFloat(curr);//convert string to float
      float_curr += 1;//actual incr

      var new_val = "" + float_curr + "px";//back to string
      $this.css("fontSize", new_val);//set the fontSize string
    }
  });
}

And :

$(document).ready(incrAllFontSize);

EDIT

I completely forgot to mention that this uses jQuery.

Font-size not getting bigger in CSS

How to approach issues of type "My styles are not applied"

First, you should use the dev tools in your browser to investigate the element in your DOM.

Browser Dev Tools - Investigate DOM

As you can see, your font-size value is overwritten by Bootstrap's styles (coming from that _rfs.scss file mentioned at the right).

Option A: Display Headings (Bootstrap, only in your case)

Use Bootstrap's Display Headings. This lets you define different font sizes on your headings.

In your case, you could try this one:

<h1 class="display-1">Hello World.</h1>

Option B: Class Specificity

Add a class by yourself and refer to this class in your CSS.

h1.my-heading {
  font-family: 'Montserrat';
  font-size: 15rem;
}

<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
  <div class="col-lg-6">
    <h1 class="my-heading">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

Angular: Change Font Size options for users in IE11 (CSS-Variables)

Try applying it manually for IE alone.

changeFontSize(fontSize){
    ieFontSizeClass=[
        '.someClass1 *',
        '.someClass2 *',
        ...
        ...
        ...
    ]

    if(this.isIE()){
        ieFontSizeClass.forEach((className: string) => {
                let elements = document.querySelectorAll(className) as NodeListOf<HTMLElement>;

                let i = 0;
                for (i = 0; i < elements.length; i++) {
                    elements[i].style.fontSize = fontSize;
                }
            });
    }
}

NOTE that adding * is important because it will be applied to all the child elements.

How to Get Font Size in Html