CODEWITHSUNDEEP
jquerycss
Elitmiar
Elitmiar

Reputation: 36879

How can I use a specific font only when the user is running Linux?

Is there a way to detect a Operating system using JQuery or CSS? With CSS I'm referring to something similar to <![if !IE]>

I need to use a specific font only when web page is viewed using Linux and don't want to include this with other os's

Upvotes: 5

Views: 6693

Answers (4)

henry
henry

Reputation: 4385

You might check out Rafael's Browser Selector javascript http://rafael.adm.br/css_browser_selector/ - you'll be able to define browser-, os-, and brower/os combo-specific CSS, in an easy form:

(.os)(.browser) selector {...;} (so, e.g. .opera {color: red;})

It supports a lot of os's and a lot of browsers

Upvotes: 1

Dylan Valade
Dylan Valade

Reputation: 5605

I like to do a combination of jQuery and CSS to solve this issue. This approach was inspired by modernizr, which dynamically adds all of the browser's abilities as classes to the html element.

// Detect Browser
$.each(jQuery.browser, function(i, val) {
  $("html").addClass( i );
  $("html").addClass( val );
});
// Detect Operating System
$("html").addClass( navigator.platform );

The result of running the code above gives me this output when I view a page and inspect the DOM. One issue is that I'm on Mac with Chrome but jQuery's browser object thinks I'm using Safari, which is also a webkit browser.

<html class="webkit version 535.1 safari MacIntel">

If you print javascript's navigator.useragent you'll get a result with tons of information like this

Mozilla-5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1

msie is the jQuery.browser label assigned for IE so I could do something like this in my css without needing conditional statements if I append the browser as a class to the html or body tags:

h1 { /* my regular h1 styles */ }

.msie h1 { /* IE edge case styles for h1 treatment */ }

In jQuery you could use its fantastic selector engine to search for version #'s and various combos to target issues directly that only apply to specific browser versions and OS combinations. Just output the entire userAgent string html class, just be sure to clean that string removing the /() characters.

http://api.jquery.com/jQuery.browser/

@Sky had a great link to this http://www.quirksmode.org/js/detect.html which could be used to get more accurate browser and OS information which you could append as classes to the HTML element.

Upvotes: 3

Paul Turner
Paul Turner

Reputation: 39675

Though not directly answering the question of "detecting O/S", you may be able to achieve the desired effect of selecting a font using the font-family CSS property.

This property lets you chose a list of fonts, where the browser will try to match fonts available on the system. It reads left-to-right and will use the first font available:

body
{
    font-family: "Calibri", "Arial", "Sans Serif"
}

In this case, if the "Calibri" font is not available, the system will use "Arial". If "Arial" cannot be found, it will use any available fonts from in the "Sans Serif" family.

With this you can specify your Linux-specific font first and know that other platforms without the font available will display using a suitable font too.

Upvotes: 8

Sky Sanders
Sky Sanders

Reputation: 37104

examine navigator.userAgent

You can generally find what you seek with simple rx but to do so will require a basic understanding of sniffing. You can find a good example here.

NOTE: i am not suggesting that you use a sniffing library, just that you familiarize yourself with what you need to look for.

As far as dynamically controlling fonts by OS, I think that, barring some edge case that is not stated in your question, simply defining a font stack is your best bet.

Upvotes: 14

Related Questions