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

【问题标题】：JQuery: changing font based on user's operating system?JQuery：根据用户的操作系统更改字体？
【发布时间】：2014-09-10 06:38:08
【问题描述】：

由于 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');
        }

【问题讨论】：

出于好奇，我可以知道我们在说什么字体吗？宋体？使用 CSS 有什么不好的地方："Helvetica Ultralight", "Helvetica Neue", Helvetica, Arial, sans-serif？
@RokoC.Buljan Helvetica-Ultralight，我正在尝试将其更改为 Arial, sans-serif
@RokoC.Buljan 实际上我从来不知道整个表达是什么意思。这是否意味着主要字体是 Helvetica 而 Arial 是备用字体？
是的。这意味着如果存在则使用第一种字体，如果存在则不使用第二种字体，以此类推。
@RokoC.Buljan 非常感谢朋友！

标签： jquery css

【解决方案1】：

只有部分设计师在windowsHelvetica上安装了完整的包，所以你不需要为Windows用户操心，99.8%的人永远不会看到Helvetica。一个常见的建议是首先服务于 iOS，然后继续使用其他后备
简单的 CSS font-family :

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

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

【讨论】：

【解决方案2】：

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

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

&lt;p&gt;Hello, world!&lt;/p&gt;

【讨论】：

【解决方案3】：

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

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

【讨论】：

在投反对票之前，请让我知道我的错误是什么:(
我个人没有发现任何错误，但不是更简单，例如：$('h1').css({fontFamily:'Arial, sans-serif'});
@RokoC.Buljan 问题被问到 - “为什么代码不起作用？”我刚刚在他的代码中发现了一个错误并在这里报告。我知道有更好的方法来实现他的目标。
Q.Title 是：JQuery: changing font based on user's operating system?，不需要 jQuery