Question

如果第一种字体没有加载，我怎样才能将特定样式应用于某些文本？

字体1比字体2更大，如果没有加载字体1，我想为字体2设置font-weight属性。

示例：

#text{
    font-family: font1,font2;
    font-size: 40px;
    font-weight:bold; /* Only for font 2 */
}

JavaScript解决方案也是可以接受的。

Answer 1

理论上，你想要的是不可能的。但实际上，它是。

坏消息： 您无法使用CSS根据font-weight适用的内容更改font-family属性。 期间。 实际上，即使JavaScript并不像看起来那么容易，因为style.fontFamily属性不会改变。无论适用哪种情况，它仍然是font1,font2。

好消息： 您不必根据font-weight更改font-family！。使用@font-face定义font2以指向font2粗体版本的字体文件，并使用与font1相同的字体权重定义它，即使它是＆＃39 ;不是＆＃34;真实＆＃34;之一。

@font-face {
  font-family: font2;
  src: url("font2_Bold.ttf"); 
  /*...rest of required font files, eot, woff... all bold */
  font-weight: 400;
}

另外注意，指定多个字体系列已成为过去，从网站依赖于要在用户计算机上安装的字体进行应用的日子开始。

今天，由于现代字体格式和@font-face，这种情况再也不会发生了。字体文件总是加载，因为它是由网站提供的，它不必安装在用户的机器上。所以放松一下您的font2实际上会加载少于0.5%个案例。并且，通常，当字体文件无法加载时，可能无法加载多个其他资源，这意味着这是最小的问题之一，并且可能需要页面重新加载才能正确查看它。

如果以上不是选项或看起来太复杂，您可以随时使用任何资源的load事件，包括字体文件：

＆＃13;

function fontHasLoaded() {
  document.getElementById('test').style.fontWeight = 400;
}

＆＃13;

#test {
  font-family: 'Rubik-Mono-One', Arial, sans-serif;
  font-weight: 900;   
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet" onload="fontHasLoaded()">

<span id="test">Inspect to see font-weight. Than change font link to a broken link and inspect again.</span>

＆＃13;

Answer 2

如果你只想用css做这件事似乎是不可能的。 Js可以提供帮助。

if(ele.style.fontSize == font2){
    ele.style.fontWeight = xxx;
}

Answer 3

你可以使用jQuery。例如

if ($("#text").css('font-family') === 'font2')
{
   $("#text").css({'font-weight': 'bold'});
}

Answer 4

您可以通过下载所需的字体来完成此操作。

首先它将在 ttf

将其转换为 woff 格式webfont-generator

@font-face {
    font-family: "Robotoregular";
    font-weight: normal;
    font-style: normal;
    src: local("Roboto Regular"), local("Roboto-Regular"), url("../fonts/roboto/roboto-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: 'montserratbold';
    src: url('../fonts/Montserrat/montserrat-bold-webfont.woff2') format('woff2'),
         url('../fonts/Montserrat/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

然后将样式应用于指定的

#text{
    font-family: 'Robotoregular','montserratbold';
    font-size: 40px;
}

仅在第一个字体未加载时才应用字体样式

4 个答案: