Faster fonts on mobile

时间：2015-09-19 作者：IXN

我想我有一个好主意，可以让我的网站在手机上加载得更快：“不要在小屏幕上加载自定义字体”

我知道如何根据媒体查询和css的屏幕大小来设计/更改所使用的字体。我不知道的是如何防止在小屏幕中加载自定义字体。我使用谷歌字体，并将它们排列在函数中。php，但我对您的解决方法持开放态度。

顺便说一句，这是怎么做的，when using @font

2 个回复
最合适的回答,由SO网友:Robert hue 整理而成

WordPress有wp_is_mobile() 检测移动和手持设备的功能。您可以使用它来定义排队函数，以便有条件地加载字体。

您可以像这样将非移动设备的字体排队。

function my_enqueue_function() {

  if ( !wp_is_mobile() ) {

    wp_enqueue_style( \'gfonts\', \'http://fonts.googleapis.com/css?family=Arbutus+Slab\', false, NULL, \'all\' );

  }

}
add_action( \'wp_enqueue_scripts\', \'my_enqueue_function\' );

SO网友:IXN

我发现这个（部分？）解决方案：

将字体排入队列时，请使用wp\\u is\\u mobile（），如下所示：

function my_scripts() {
    // Load if not mobile
    if ( ! wp_is_mobile() ) {
         wp_enqueue_style( \'my-google-fonts\', \'https://fonts.googleapis.com/css?family=Nicefont:400,500\' );
    }
    // your other scripts that you enqueue...
    }
    add_action( \'wp_enqueue_scripts\', \'my_scripts\' );
参考文献：codex 和other question

还有这个plug-in, 但我认为这对我的要求来说太过分了。

标签： css   wp-enqueue-style   responsive   小码农  

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中，必须将下面的代码放入函数中。php的子主题，但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它，那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我，放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s