CSS: использование шрифта face только на Mac

Question

@font-face - это круто, но на ПК он выглядит ужасно. Только на Mac (не знаю о Linux) это отображается естественным образом. Как я могу отображать специальный шрифт только для пользователей Mac и использовать обычный шрифт для пользователей ПК?

Спасибо!

Answer 1

Если вы не возражаете против использования JavaScript и jQuery, вы можете обнаружить ОС с помощью клиентского плагина jQuery, а затем установить шрифты. Кажется, это старый материал, но он работает с jQuery 1.3.2, и я не удивлюсь, если он будет работать с jQuery 1.6.1.

<script src="./jquery-1.3.2.js"></script> 
<script src="./jquery.client.js"></script> 
<script type="text/javascript"> 
    if($.client.os == 'Mac')
        $('body').css('font-family',"'Looks good in Mac'")
    else if($.client.os == 'Windows')
        $('body').css('font-family',"'Looks good in Windows'")
    else if($.client.os == 'Linux')
        $('body').css('font-family',"'Looks good in Linux'")
</script> 

Вы можете заменить body с любым селектором CSS, даже если он не поддерживается браузером, скорее всего, он поддерживается jQuery.

jQuery доступен на jquery.com

Полный jquery.client.js

(function() {

    var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
                || this.searchVersion(navigator.appVersion)
                || "an unknown version";
            this.OS = this.searchString(this.dataOS) || "an unknown OS";
        },
        searchString: function (data) {
            for (var i=0;i<data.length;i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                        return data[i].identity;
                }
                else if (dataProp)
                    return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
        },
        dataBrowser: [
            {
                string: navigator.userAgent,
                subString: "Chrome",
                identity: "Chrome"
            },
            {   string: navigator.userAgent,
                subString: "OmniWeb",
                versionSearch: "OmniWeb/",
                identity: "OmniWeb"
            },
            {
                string: navigator.vendor,
                subString: "Apple",
                identity: "Safari",
                versionSearch: "Version"
            },
            {
                prop: window.opera,
                identity: "Opera"
            },
            {
                string: navigator.vendor,
                subString: "iCab",
                identity: "iCab"
            },
            {
                string: navigator.vendor,
                subString: "KDE",
                identity: "Konqueror"
            },
            {
                string: navigator.userAgent,
                subString: "Firefox",
                identity: "Firefox"
            },
            {
                string: navigator.vendor,
                subString: "Camino",
                identity: "Camino"
            },
            {       // for newer Netscapes (6+)
                string: navigator.userAgent,
                subString: "Netscape",
                identity: "Netscape"
            },
            {
                string: navigator.userAgent,
                subString: "MSIE",
                identity: "Explorer",
                versionSearch: "MSIE"
            },
            {
                string: navigator.userAgent,
                subString: "Gecko",
                identity: "Mozilla",
                versionSearch: "rv"
            },
            {       // for older Netscapes (4-)
                string: navigator.userAgent,
                subString: "Mozilla",
                identity: "Netscape",
                versionSearch: "Mozilla"
            }
        ],
        dataOS : [
            {
                string: navigator.platform,
                subString: "Win",
                identity: "Windows"
            },
            {
                string: navigator.platform,
                subString: "Mac",
                identity: "Mac"
            },
            {
                string: navigator.userAgent,
                subString: "iPhone",
                identity: "iPhone/iPod"
            },
            {
                string: navigator.platform,
                subString: "Linux",
                identity: "Linux"
            }
        ]

    };

    BrowserDetect.init();

    window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser };

})();

Answer 2

Клиентский плагин jQuery очень классный. Чтобы сделать сниффинг ОС хотя бы с простым JavaScript (что, как я предполагаю, сэкономит некоторые накладные расходы), вы можете сделать:

$(document).ready( function () {
    var os = navigator.platform;
    if (os.indexOf("Mac") != -1) {
        $('body').css( 'font-family', '"Lucida Grande"' );
    }
    else if (os.indexOf("Win") != -1) {
        $('body').css( 'font-family', '"Arial"' );
    }
    else if (os.indexOf("iPhone") != -1) {
        $('body').css( 'font-family', '"Helvetica"' );
    }
});

Answer 3

Как бы я ни соглашался с вами в отношении Windows, я боюсь, что вы не сможете использовать CSS в одиночку, чтобы отличить браузер Mac от браузера Windows. Вам нужно будет использовать серверный скрипт (или, может быть, JavaScript?), Чтобы прослушать это, и решить соответственно, загружать или нет @font-face CSS.