Detecting IE "Ignore font styles" mode

Hi All,

I've been exploring the feasibility of using icon fonts for a media player.
I created a set of fonts at icomoon.io and I'm using JavaScript to check
for two settings:

a) background-color of the icon container div
If the background color is light, I deliver black icons, and if the
background color is dark, I deliver white icons. This works well, and seems
to be reliable even within  Windows contrast mode.

b) font-family of the <span> that contains the icon font. By default,
font-family is set to "icomoon". However, if the user has defined a custom
style sheet that overrides font-family, the icons wouldn't be displayed so
I'll want to display an image instead.
In Internet Explorer, if the user has enabled a custom style sheet, this
technique works fine. However, if they select the checkbox to "Ignore font
styles specified on webpages", that doesn't change the computed font-family
(it still shows up as  "icomoon"). I'm also seeing "icomoon" as the
computed value for font-family if I explore the span#play element using F12
Developer Tools in IE.

Here's my test page:
http://terrillthompson.com/tests/icomoon

And here's a general idea of the JavaScript code I'm using to check
font-family of span#play, which by default has font-family:"icomoon":

var iconFont = "";
var playSpan = document.getElementById('play');
if (window.getComputedStyle) { // supported by most browsers
  iconFont = document.defaultView.getComputedStyle(playSpan,
null).getPropertyValue('font-family');
  iconFont = iconFont.replace(/["']/g, ''); // strip out single or double
quotes
}
if (iconFont !== 'icomoon') {
  // display images instead of icon fonts
}

Since the above method fails, is there any way to detect whether IE users
have that checkbox checked?

Thanks,
Terrill

---
Terrill Thompson
Technology Accessibility Specialist
DO-IT, Accessible Technology Services
UW Information Technology
University of Washington
tft@uw.edu

Received on Tuesday, 27 May 2014 20:42:30 UTC