Google 移动端与桌面端的字体
Google Fonts on Mobile vs Desktop
我正在为我的 webapp 使用 Merriweather 字体,如下所示导入它。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300i">
这在桌面浏览器上运行良好,但在移动设备上,它会退回到默认字体。如果我将行替换为导入 300
而不是 300i
,一切似乎都正常。
谁知道我怎样才能在桌面上使用 300i
字体并在移动设备上退回到 300
?
您需要将这两种字体导入到您的主样式表中。
@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
}
}
无需查看您可能已经实现的任何 css,在 Web 和移动设备之间切换前端的最简单方法是使用媒体查询。
由于您想同时使用 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;
我正在为我的 webapp 使用 Merriweather 字体,如下所示导入它。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300i">
这在桌面浏览器上运行良好,但在移动设备上,它会退回到默认字体。如果我将行替换为导入 300
而不是 300i
,一切似乎都正常。
谁知道我怎样才能在桌面上使用 300i
字体并在移动设备上退回到 300
?
您需要将这两种字体导入到您的主样式表中。
@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
}
}
无需查看您可能已经实现的任何 css,在 Web 和移动设备之间切换前端的最简单方法是使用媒体查询。
由于您想同时使用 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;