1

Div's height is not correct, if I use the font imported above. But as an example, Verdana is ok. This is one of my system fonts.

      var dim = document.querySelector(".dim");
      var box = document.querySelector(".box");
      var clientHeight = box.clientHeight;
      var offsetHeight = box.offsetHeight;

    dim.innerHTML = "clientHeight: " + clientHeight + ", " + "offsetHeight: " + offsetHeight;
        @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

        * {
            margin     : 0px;
            padding    : 0px;
            box-sizing : border-box;
        }   

        .box {
            position      : absolute;
            left          : 100px;
            top           : 10px;
            border        : 1px solid #000;
            width         : 200px;
            padding       : 10px;
            background    : green;
            text-align    : center;
            font-size     : 12px;
            font-family   : Verdana;
            /*font-family : 'Open Sans', sans-serif;*/
            /*font-family : Anton;*/
        } 

        .dim {
            position   : absolute;
            left       : 350px;
            top        : 10px;
            border     : 1px solid #222;
            width      : 300px;
            height     : 40px;
            padding    : 10px;
            background : lightblue;
            text-align : center;
            opacity    : 1;
        }
    <div class="box">
        1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci voluptate exercitationem alias...
    </div>
    <div class="dim"></div>

I use it in a marquee. Thanks for any effort to help. :)

Rahul Dahal
  • 152
  • 1
  • 12
Tukenmezkelam
  • 63
  • 7
  • 1
    Try using `Element.getBoundingClientRect()`. You can learn about it [here](https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp) with W3schools or [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) with Mozilla Developer. – myjobistobehappy Nov 28 '20 at 00:57

2 Answers2

1

I have found the solution of my problem. I guesss, when the height is calculated or gotten by the browser, because the font is not loaded yet, it gives the height of the div with default font. I fount the page below and solved my problem. Hope will help others who have the same problem. :)

How to be notified once a web font has loaded

    document.fonts.ready.then(function () {
  var offsetHeight = box.offsetHeight;
  var clientHeight = box.clientHeight;
dim.innerHTML = "clientHeight: " + clientHeight + ", " + "offsetHeight: " + offsetHeight;

});

This gives the correct result.

Tukenmezkelam
  • 63
  • 7
0

As a follow up to myjobistobehappy 's comment,

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport. learn more at MDN

Basic usage,

var clientHeight = box.getBoundingClientRect().height; // 76 with font 'Anton' and 86 with 'open sans'
Rahul Dahal
  • 152
  • 1
  • 12
  • Thank you, but I've tried it before. I noticed that, it works width Firefox but not witdth Chrome. I wonder the reason. Did you get wrong results with code above? – Tukenmezkelam Nov 28 '20 at 18:17
  • Yes, it seems to work for me. [demo codepen link](https://codepen.io/rdaahal/pen/dypPyza) – Rahul Dahal Nov 29 '20 at 02:53
  • "demo codepen link" gives 404 error. No prolem. I found the solution. Sharing below. Thanks a lot... – Tukenmezkelam Nov 30 '20 at 14:43