Jump to content

How to find the real inherited font-size and line-height for a text?


pstein
 Share

Recommended Posts

Sometimes when I inspect the web page HTML/CSS code and search for the font-size and line-height of a certain text I can not find it.

When I right-click (in Firefox) on this certain text and select "Inspect element"
the corresponding HTML/CSS code is shown in the lower pane in WebDeveloper.

However in the lower right sub pane I do not find the real, final font-size and Line-height.
All occurencies are labeled as "inherited"

Inherited from what?

I expect to get at least one valid font-size and line-height CSS value in the cascade chain.

Lets take an example from a german computer online magazine:

https://www.zdnet.de/88377738/smb-luecke-microsoft-veroeffentlicht-patch-kb4551762

Now right click on the line beginning with

Set-ItemProperty -Path "HKLM:\SYSTEM\Current......

at the bottom of the core article and inspect element.

For this text I found only "inherited" values.

How do I find out the current font-size and line-height?

I am NOT interested for a particular example but on how to find it out in general.

Peter

Link to comment
Share on other sites

If there is nothing in the entirety of the cascade then it means that it is using the browser's default. In Firefox, you can find a "Computed" tab near the "Rules" tab which will have a font-size property in pixels. If you don't see it there then click the "Browser styles" checkbox.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...