Is there a way to stop this ndash from disappearing when the font size is reduced?

When I use an – character at a smaller font size (14px), it becomes invisible in Firefox on Windows but visible when zoomed in one level. However, this issue does not occur on Firefox for Linux where the character is visible at all sizes. It seems that at smaller sizes, the dash may render as a line of zero width. How can I fix this problem? Here are some possible solutions:

  • Try using a different dash character
  • Wrap the dash in a span and force it to be bigger (may seem clunky)
  • Check if the font definition (embedded Open Sans) is broken

Are there any other approaches that I may have missed?

cssfonts

Answer №1

Avoid using the outdated 90's Microsoft core fonts like Arial and Verdana on Windows operating systems. These fonts have strong hints designed to prevent "fat" or "blurry" areas in letters, causing some parts of the text to disappear at smaller sizes. During that time, Microsoft prioritized maintaining the pixelated appearance that Windows users were familiar with, rather than optimizing for clarity (there are workarounds within Microsoft's rendering system to address these font issues, but they are not available for third-party applications).

Answer №2

The issue at hand pertains to fonts rather than browser compatibility. Consider switching to a different font such as "Times New Roman" for troubleshooting purposes.

When it comes to displaying small icons, the CSS @font-face rule proves to be the most dependable solution. By utilizing this rule, you can prompt the browser to fetch a specific font, ensuring that users have the necessary font installed. Certain fonts are even tailored for this purpose, offering additional built-in icons; "Font Awesome" serves as a popular example.

For further details, please visit: Does every browser support all unicode?

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

Choose a chart from the dropdown menu and showcase it

I am facing a challenge in displaying two charts using a dropdown menu. I have attempted to achieve this using both JQuery and AngularJS, but I am encountering difficulties in making it work properly. There are two charts that need to be displayed: <d ...

javascriptjqueryhtmlcssangularjs

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

cssjquery-ui

What is the best way to create a clickable button using HTML and CSS? The button should be centered on top of an image with a title

I'm in the process of creating a button overlay on an image that directs to another page within the same site. I don't have much experience with coding, but with some online resources, I was able to piece together what I needed. The issue I' ...

jqueryhtmlcss

Having difficulty retrieving the InnerHtml from the editor div of the Bootstrap WYSIWYG rich text editor using c#

I have been utilizing the Bootstrap WYSIWYG rich text editor to create HTML email templates. The editor functions perfectly when checked in the browser. To fetch the HTML contents of the editor div using JQuery, I used $("#editor").html(); In an attempt ...

c#jquerycsshtmltwitter-bootstrap-3

Utilizing the checked or clicked property of radio buttons for my specific scenario

Hello everyone, I am currently working on Rails 3.2.13 and have implemented the following script in my view file. Whenever a user selects 'Other' as their owner type, I need the div with id=group_user_id to open and save the operation at the end. ...

javascripthtmlcssruby-on-railsicheck

Customizing the Mui Theme in a Unique Way

After generating an MUI component from Mui DatePicker, I encountered the following code: <span class="my-theme-MuiTypography-root my-theme-MuiTypography-caption my-theme-MuiDayCalendar-weekdayLabel css-1mln09i-MuiTypography-root-MuiDayCalendar-week ...

javascripthtmlcssreactjsmaterial-ui

Style.css remains invisible to NetBeans

My webapp is built using Servlets and JSP. However, I am currently facing an issue with directing NetBeans to my style.css file. Whenever the stylesheet is placed in WEB-INF or META-INF or even outside them within the Web Pages directory, everything func ...

cssservlets

Issue with Second Accordion Panel not refreshing

Within my accordion setup, the initial panel showcases a selection of icons. Upon choosing one of these icons, it triggers the display of one of three panels in place of the second accordion panel, based on the selected icon. The issue seems to be rooted i ...

javascriptjqueryhtmlcss

How can I use Moment.js to show a custom message based on the current day of the week?

Currently, I am utilizing Moment.js to dynamically showcase various messages based on the day of the week. For instance, if it's: If it's Monday, I want it to display "It's Monday!" If it's Tuesday, I'd like it to show "Happy Tu ...

javascripthtmlcssmomentjs

Ensure that all of the text boxes are aligned perfectly in the same vertical position

Is there a way to align all the textboxes in the same vertical position without using tables, only using HTML and CSS? The textboxes should start just after the label and follow the width of the label. Also, all labels are left-justified. Code :: <d ...

javascripthtmlcssasp.net

Identifying touchscreen capability through media queries

Is there a secure method, utilizing media queries, to trigger an action when not using a touchscreen device? If not, would you recommend opting for a JavaScript solution like !window.Touch or Modernizr? ...

csstouchmedia-queries

Retrieve the truncated text content from the text node using ellipsis

Is there a way to retrieve truncated text from a node using Javascript? Take a look at the code snippet below: console.log(document.getElementById("text1").textContent); // prints "This is a long text" console.log(document.getElementById("text2").text ...

javascripthtmlcssellipsis

What is preventing this DIV from stretching to the full width of its children?

Why isn't my container DIV expanding to the width of the large table? <html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link ...

htmlcss

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

javascriptcssreactjsreact-reduxmaterial-ui

Exploring the depths of complex structures with Selenium to uncover hidden elements

If we look at this particular piece of HTML code: <tr class="highlight"> <td><center><a href="example.code"> Bar </a></center></td> <td><center> Foo </center></td> &l ...

pythoncssseleniumselenium-webdrivernested

Unable to create a responsive layout because of the use of inline CSS with "margin"

Currently, I am working on a design for a webpage that must be responsive to large, medium, and small screens. To achieve this responsiveness, I am using Material UI Grid container and placing Chips inside it with the style={{ marginLeft: 60 }} from the se ...

cssreactjsresponsive-designmaterial-ui

Experiencing a lack of desired outcome in Outlook when using simple HTML with table elements

When creating a template for Outlook, I encountered an issue where the logo appeared on the right and the link text was on the left, which is the opposite of what I wanted. How can this be resolved? <center> <table width="600px;" style="margin:au ...

htmlcssoutlookhtml-table

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

phphtmlcsswordpressmeta-tags

Trouble with JQuery Image Bubbles on Internet Explorer

I have been experimenting with implementing Jquery Image Bubbles using the following example: However, I encountered a JavaScript error when testing it in my Fiddle: http://jsfiddle.net/NinjaSk8ter/hbMzV/ I found that trying to load the JavaScrip ...

jquerycss