Question

由于Windows不支持Helvetica，我一直在考虑使用jQuery来检测用户正在使用的操作系统，并相应地更改某些文本的字体。这是我到目前为止编写的代码，但它似乎没有工作（操作系统被成功检测到）：

<script>
        $(document).ready(function() {
            var OSName = "Unknown OS";
            if (navigator.appVersion.indexOf("Win") != -1){
                OSName = "Windows";
                $('h1').css('font-family:"Arial",sans-serif;');
            }
            else if (navigator.appVersion.indexOf("Mac") != -1)
                OSName = "MacOS";
            else if (navigator.appVersion.indexOf("X11") != -1)
                OSName = "UNIX";
            else if (navigator.appVersion.indexOf("Linux") != -1)
                OSName = "Linux";
            console.log('Operating system: ' + OSName);
        });
</script>

我想知道我是否把它放在了错误的地方。我应该把它放在<head></head>区块或<body></body>区块中吗？谢谢！

编辑：实际上我的服务器上有.otf文件并声明@ font-face但它因某些原因而无法正常工作......

        @font-face{
            font-family: HelveticaNeue-Ultralight;
            src: url('/fonts/HelveticaNeue-UltraLight.otf');
        }

Answer 1

只有一些设计师在整个包装上安装了Helvetica个窗口，所以你不需要为Windows用户打扰，99.8％的用户永远不会看到Helvetica。一个常见的建议是先服务iOS，然后再继续使用其他后备服务在简单的 CSS font-family :

 "Helvetica Ultralight", "Helvetica Neue", Helvetica, Arial, sans-serif ;

另一个建议是提供浏览器with your own fonts或使用 Google-fonts 服务。
大多数设计师选择＆＃34; Open Sans ＆＃34;作为Helvetica和Arial的现代和好的替代品。

Answer 2

我建议不要使用JavaScript，因为CSS内置支持后备字体。这样，如果Windows系统确实有Helvetica，或者非Windows系统缺少它，它仍然会选择合适的字体。

body {
  font-family: Helvetica, Arial, sans-serif;
}

<p>Hello, world!</p>

Answer 3

我认为，您的这一行 - $('h1').css('font-family:"Arial",sans-serif;');无效。你应该写这样的东西：

$('h1').css({'font-family':'"Arial",sans-serif;'});

JQuery：根据用户的操作系统更改字体？

3 个答案: