jQuery check browser css version

Question

I want use @font-face for new browsers and use image-replacement for others... How I can check @font-face is exists in user browser?

Answer 1

I haven't worked with it myself, but there's the modernizr JavaScript tool that can detect a variety of modern browser functions:

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Try and give it a shot. JQuery has a feature detection feature of its own, but it can't detect font-face yet.

Answer 2

You could also run a browser check, and do things with specific browsers, and I think you can also check browsers version, but getting into detail about @font-face, im not 100% sure on.

<script type="text/javascript">
  $(document).ready(function(){

    var browser;
    if($.browser.mozilla)
      //Firefox
     $("p").css("font-style","...");
    else if($.msie)
      // Internet Explorer
     $("p").css("font-style","...");
    else if($.browser.opera)
      // Opera
     $("p").css("font-style","...");
    else if($.browser.safari)
      // Safari
     $("p").css("font-style","...");
    else
      //Unknown
     $("p").css("font-style","...");

    $('#browserName').append(browser);
  });

Answer 3

How I can check @font-face is exists in user browser?

Well I suppose you could rummage around in document.styleSheets looking to see if @font-face rules have been parsed into FONT_FACE_RULE Rule objects. (With necessary object-sniffing fallback for IE's different stylesheet model.)

But it's not really a good idea, and it's probably not the right question. Maybe the browser supports @font-face, but not the particular font format(s) you've used (TTF/OTF/EOT/WOFF). Maybe the browser/user-stylesheet is set up to override or ignore the rule. Maybe the font just couldn't be fetched from network. Maybe the browser doesn't support embedding, but the user just happened to have the font you wanted installed anyway.

A better question is, “has my special font been used?”. Whilst there's no direct way to query that, you can generally tell by looking at the offsetWidth of an inline element containing text in your target font, and comparing it to the width of another span of text set in the font it will fall back to. Unless you're unlucky enough to have picked a fallback font with near-identical metrics, chances are the results will be different.

eg. something like:

<script type="text/javascript">
    function haveFont(face) {
        var span= $('<span style="visibility: hidden; font-size: 48px">jilf:.,!</span>')[0];
        document.body.appendChild(span);
        span.style.fontFamily= 'monospace';
        var width0= span.offsetWidth;
        span.style.fontFamily= '"'+face+'", monospace';
        var width1= span.offsetWidth;
        document.body.removeChild(span);
        return span.offsetWidth!==width;
    }

    window.onload= function() {
        if (!haveFont('My Embedded Font Bold Extranice')) {
            replaceHeadingsWithImages();
        }
    }
</script>

Answer 4

If you want to detect ttf/otf support (not svg)
this is what ur looking for
ull just have to use if and else

Answer 5

You want to use font-face-detect.