我正在通过如下所示的方式将Merriweather字体用于我的Web应用程序。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300i">
这在桌面浏览器上工作正常,但在移动设备上,它恢复为默认字体。如果我替换导入300
而不是300i
的行,一切似乎都正常。
有人会知道我怎么仍然可以在台式机上使用300i
字体并在移动设备上退回到300
吗?
答案 0 :(得分:1)
在不考虑您可能已实现的任何CSS的情况下,在网络和移动之间改变阵地的最简单方法是使用媒体查询。
由于您要同时使用300和300i,因此导入
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i" rel="stylesheet">
将常规默认文本设置为
font-family: 'Merriweather';
font-style: italic;
font-weight: 300;
对于移动设备,请使用媒体查询:
@media all and (max-width: 991px) or (max-width: 768px) or (max-width: 480px) {
* these are the three popular mobile queries *
}
在媒体查询中,您可以设置文本:
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
答案 1 :(得分:0)
您将需要将两种字体都导入到主样式表中。
@font-face {
font-family: Merriweather:300i;
src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}
@font-face {
font-family: Merriweather:300;
src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}
(您可能需要将.woff
文件的实际位置放在src:
属性中。)
然后使用specific media queries for mobile and desktop
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
* {
font-family: Merriweather:300i
}
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
* {
font-family: Merriweather:300
}
}