When viewing some of the titles on in Google Chrome, they appear like this:
https://i.sstatic.net/bKjNE.png
However, when viewed in MSIE11, they look like this:
https://i.sstatic.net/SJfKk.png
The use of strong/bold/font-weight seems to have no effect. Is there a way to make the font appear "bolder"?
The issue you are experiencing is not a flaw specific to Internet Explorer 11 alone (Firefox also exhibits the same behavior as IE11). It is actually a result of using Segoe UI Light as a regular weight and a limitation of Segoe UI on Windows 7, where there is no proper italic face available for the Light weight. When you apply font-weight: bold to text set in Segoe UI Light, it appears as faux bold because there is no true Bold face for this font. Similarly, applying font-style: italic results in faux italics since an italic face does not exist for Segoe UI Light.
Google Chrome seems to address the issue with font-weight: bold by automatically selecting the Bold weight when detecting the Segoe UI family, instead of resorting to faux bold. This behavior, inherited from WebKit, suggests that Safari would likely exhibit similar behavior with comparable font families on macOS. The display of proper italics is successful because Windows 7 includes a Segoe UI Bold Italic face. Surprisingly, on Windows 10 (and even Windows 8/8.1), Google Chrome renders bold text using Segoe UI Semilight, despite having font-weight: bold specified in its UA stylesheet for b elements. This deviates from the expected behavior of choosing the Bold face over the Semilight face, but the reason for this inconsistency remains unclear.
To resolve these inconsistencies, ensure your font family is set to Segoe UI, set title font weights to 300 for Light, then adjust bold parts to 600 for Semibold or bold or 700 for Bold as per preference. Following these steps should yield the desired bold and italic styles. Remember that authentic italics are only fully supported for Segoe UI Regular and Bold on Windows 7, whereas nearly all weight variants of Segoe UI on Windows 8/8.1 and Windows 10—ranging from Light to Black—support italics functionality.
I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...
I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...
My goal is to vertically center a Font Awesome icon next to a small block of text. To better illustrate, here is a reference image of what I am aiming for: This is the visual I aspire to achieve The section of my website that I am currently fine-tuning ca ...
I would like to style the text following the span tag using CSS without affecting the span tag itself. Specifically, I want to apply styling only to the text that reads "Text to be selected", leaving the span tag unaffected. The style I desire i ...
In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...
Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...
As we work on our website, we want a unique feature where links are underlined when hovered over, with the underline staying the same width regardless of the length of the link text. How can we achieve this using CSS/jQuery/Javascript? ...
Hey Developers! I have been using the following commands in footer.phtml to retrieve all my cms/blocks in the Magento's footer. <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home')->toHtml() ...
My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...
Seeking a customized progress nav-bar for my application, with a design similar to this: https://i.sstatic.net/ahDBa.png Discovered it on this website. Despite using the provided HTML and CSS, I'm unable to make it work with Bootstrap 4. HTML < ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...
Imagine giving your website user the ability to specify a radius size, let's say 5px, and in return receiving a PNG file with a circle of that radius. This question can be divided into two sections: In what language and using which technologies can ...
Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...
doc.html .column { background-color: orange; width: 75%; vertical-align: top; display: inline-block; height: 200px; } .nav { vertical-align: top; display: inline-block; width: 25%; background-color: lightgreen; height: 200px; } * { ...
Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...
Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...
After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...
Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...
Currently in the process of optimizing my website for iPhones and exploring the Safari reader function. I believe it's a useful feature for websites with lengthy text, similar to mine, but I want to customize it slightly. Is there a way to adjust th ...
I attempted to center align my search bar, but it stubbornly stays to the left. Here's the code I'm using: <head> <style> html { overflow: auto; } html, body, iframe { ...