CSS中的Segoe UI Semilight在Chrome上不起作用

布伦特·特劳特

我正在尝试在网页上使用Segoe UI Light,Segoe UI Semilight和Segoe UI。它在IE中呈现出色,但Chrome似乎无法区分Light和Semilight。

我正在使用此StackOverflow答案上建议的CSS,是Microsoft建议的。

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

以下jsfiddle显示了Segoe UI的各种字体粗细,包括Light和Semilight:http : //jsfiddle.net/nHXDA/

这是结果。

铬合金:

在此处输入图片说明

IE:

在此处输入图片说明

有想法该怎么解决这个吗?

斯蒂芬·鲍尔

除了您的字体只能在Windows设备上正确显示,而在所有其他未安装该字体的字体上将其忽略之外,您还需要确保有合适的备用字体。

第二件事是您的字体定义错误,并且无法在浏览器中使用。虽然Internet Explorer可以直接使用正确的字体文件,但src: local("Segoe UI Semibold");所有其他浏览器指定的字体文件都需要引用字体家族。src: local("Segoe UI");

在使用半粗体的情况下,您需要这样指定字体定义:

@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight"), local("Segoe UI");
}

修复字体定义后,它应类似于以下屏幕截图所示。在这些屏幕截图中,您还将看到,如果使用全名而不是字体系列名称指定了字体系列,则该字体将回退到Times New Roman。发生这种情况是因为浏览器无法解析字体名称,该字体名称似乎是IE专有的。

不知道是否是因为我使用本地字体,并且是否修复了可用的Web字体,您需要进行其他调整以使字体看起来不错。Web字体可能有特殊的提示供Web使用。

浏览器的各种屏幕截图

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS float:right在JQuery UI selectmenu上不起作用

来自分类Dev

jQuery UI Datepicker在Chrome中不起作用

来自分类Dev

jQuery UI Datepicker在Chrome中不起作用

来自分类Dev

CSS动画“从侧面滑入”在Chrome上不起作用

来自分类Dev

CSS元素过渡高度在chrome上不起作用

来自分类Dev

CSS动画在Chrome上不起作用

来自分类Dev

jQuery UI droppable在IE和Firefox上不起作用(但在Chrome上有效)

来自分类Dev

隐藏的溢出在Firefox上不起作用,但在IE和chrome中起作用

来自分类Dev

CSS Mask在Firefox上不起作用

来自分类Dev

Google字体在CSS上不起作用

来自分类Dev

CSS“悬停”在滑块上不起作用

来自分类Dev

CSS Calc在Safari上不起作用

来自分类Dev

css 文件在 wahmpserver 上不起作用?

来自分类Dev

jQuery UI拖放在移动设备上不起作用

来自分类Dev

jQuery UI放在空容器/列表上不起作用

来自分类Dev

jQuery UI在动态创建的DOM元素上不起作用?

来自分类Dev

Kendo UI 在 Windows Server 2016 上不起作用

来自分类Dev

CSS:悬停在iOS Safari和Chrome上不起作用

来自分类Dev

HTML / CSS-自适应背景仅在Android设备上不起作用-Chrome

来自分类Dev

CSS悬停div影响其他div在Google Chrome上不起作用

来自分类Dev

将HTML链接到CSS在Google Chrome上不起作用

来自分类Dev

display flex在Chrome中的摘要标签上不起作用?

来自分类Dev

HTML5中的<picture>标签在chrome上不起作用?

来自分类Dev

Metro ui CSS CSS tile-selected不起作用

来自分类Dev

CSS @keyframes在Chrome中不起作用

来自分类Dev

旋转CSS在Chrome中不起作用

来自分类Dev

参数在Angular ui中的$ stateProvider中不起作用

来自分类Dev

jQuery UI在WordPress插件中不起作用

来自分类Dev

在Angular ui-router子模板中不起作用

Related 相关文章

热门标签

归档