Support for numeric font weights in web browsers

Which browser versions have full support for using numeric values for the font-weight property? This includes Internet Explorer, Firefox, Chrome, Safari, iOS Safari, and Android Browser.

While most browsers support the keyword values 'bold' and 'normal', I have not been able to find an up-to-date list of browsers that fully support numeric values for the CSS font-weight property. The only information I could find is from a blog post titled Font-weight is still broken, which showed inconsistencies in rendering numeric weights in browsers prior to IE8's release in 2009.

For example:

<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Roboto', sans-serif; }
.light { font-weight:300 }
.normal { font-weight:400 }
.bold { font-weight:700 }
</style>
fontscross-browsercss

Answer №1

As far as my knowledge goes, the numerical values assigned to font-weight have been included in browsers for a long time now. However, the actual impact of these numbers on the weight of a font depends on the specific font being used (whether from the user's device or through @font-face). For example, if a font does not have a "semibold" variant, setting it to 500 won't make any difference.

If you're curious about how browsers handle missing font weights, you can check out the specification which explains this behavior: http://www.w3.org/TR/CSS21/fonts.html#font-boldness

I hope this information proves useful to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin). <section id="section1" class="cd-section"> // pos. static/relative has height 0px <div class="itemIso"> // pos. absolute, he ...

htmlcsspositionheightabsolute

Icons and texts are not appearing in the Bootstrap Navbar

I'm having an issue with displaying the brand logo along with a compact disk image and some text. The code works fine everywhere except within the tag.</p> <p>Here's the code snippet I'm working with, using Django on the backend ...

htmlcssdjangobootstrap-4font-awesome-5

Leveraging knockout.js to define the width for kendo-ui input wrappers

In the durandal project I'm working on, where JavaScript and HTML are written on separate pages, I encountered an issue with a kendo-combo element. When I initially set the width using the wrapper-input width declaration, it worked perfectly fine. How ...

javascriptcssknockout.jskendo-uiwidth

Click on a thumbnail to open the gallery

I am currently working on implementing a feature that will allow a gallery to open when a thumbnail is clicked. At the moment, the code I have looks like this: <div class="row"> <div class="col-lg-12"> <h1 class="page-h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

javascriptjquerycsstabsslider

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...

htmlcssflexbox

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Combining the value of $(this) to create an identifier name

I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate ...

javascripthtmlcss

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css

Allowing breaks with the :nth-child() selector

There must be a straightforward explanation for this perplexing issue. However, in my view, it ought to function as intended. We are currently utilizing the Bootstrap 3 CSS framework. The following code is present on a specific page: <div class="promo ...

htmlcsscss-selectors

utilizing a dynamic illustration as the backdrop

Despite my efforts, the canvas on my webpage is taking up the entire screen and preventing me from clicking on the navigation menu. I've tried various solutions like adding div tags and adjusting the z-index without success. Here's a snippet of t ...

htmlcsscanvas

Is there a way to align text and an image with the bottom line in HTML?

After running Code A, I am presented with Image A as the result. I am looking to align this text and image at the bottom line, similar to how it appears in Image B. How can I achieve this alignment? Code A <asp:Label ID="Label1" runat=" ...

htmlcssasp.net

The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again. //function for adding only one item to cart document.getElementById('btn1').onclick = function() { addItemToCart() }; fun ...

javascripthtmlcss

The navigation on my mobile collapses whenever I use the Hello bar app

I am facing a problem with my Shopify theme. I recently installed an app called "Hello Bar" to show offers on all pages, but it seems to be incompatible with my theme. The developers of the app suggested adding the following code to my CSS file: @media ...

javascriptjquerycssshopify

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

htmlcsstwitter-bootstrap

Having trouble with clicking on an icon link within a list

Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...

htmlcsshovericons

"Showcasing products on top of a background picture

I'm trying to achieve a specific layout on my codepen page, where the <div class="item__boxes"> element is displayed at the bottom of the <div class="item">. However, I've run into some issues and need help with the implementation. Q ...

htmlcssimageflexbox

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Converting Selenium Webdriver Xpath value to CSS: A Step-by-Step

We are looking to transform the lengthy HTML Xpath values in the existing code into a shorter CSS value: driver.findElement(By.cssSelector(".form button")).click(); ...

javacssseleniumxpathwebdriver

How to target specifically images contained within anchor elements using jQuery?

I am looking for a way to select only images that are inside links, so I can add the rel="lightbox" attribute to those links. I have attempted to achieve this using 2 loops but it is not working as expected because it also adds the rel attribute to normal ...

jquerycss