@font-face 无法在 Android 5.0.2 手机上加载，尽管在 PC 桌面上加载

Question

问题：@font-face 字体名为 'Ubuntu-L' 没有加载到我的HTC One Android 5.0.2 尽管在 PC 桌面上加载，这是我的页面：piotrdeja.pl 你可以在手机上查看看看我的意思。

我的页面用作 wordpress 主题，这是我的 functions.php 摘录，尽管 @font-face 直接在 style.css 中声明。函数.php：

    <?php 

        function learningWordpress_resources() {
            wp_enqueue_style( 'owl.carousel.min', get_template_directory_uri() . '/css/owl.carousel.min.css',false,'1.1','all');
            wp_enqueue_style( 'owl.theme.default.min', get_template_directory_uri() . '/css/owl.theme.default.min.css',false,'1.1','all');
            wp_enqueue_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css',false,'1.1','all');
            wp_enqueue_style('style', get_stylesheet_uri());
            wp_enqueue_script( 'jquery-3.1.1', get_stylesheet_directory_uri() . '/js/jquery-3.1.1.js', array( 'jquery' ) );
            wp_enqueue_script( 'bootstrap.min', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
            wp_enqueue_script( 'owl.carousel.min', get_stylesheet_directory_uri() . '/js/owl.carousel.min.js', array( 'jquery' ) );

            wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ) );

    }

    add_action('wp_enqueue_scripts', 'learningWordPress_resources');


    ?>

style.css：

    @font-face {
      font-family: 'Ubuntu-L';
      src: url('fonts/Ubuntu-L.eot'); /* IE9 Compat Modes */
      src: url('fonts/Ubuntu-L.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('fonts/Ubuntu-L.woff2') format('woff2'), /* Super Modern Browsers */
           url('fonts/Ubuntu-L.woff') format('woff'), /* Pretty Modern Browsers */
           url('fonts/Ubuntu-L.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('fonts/Ubuntu-L.svg#svgUbuntu-L') format('svg'); /* Legacy iOS */
    }

Answer 1

问题在于您的 css 代码：

@media only screen and (max-width: 1500px) and (min-width: 1001px)
h2 {
    text-align: center;
    font-family: Ubuntu-L;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    color: white;
}

您为媒体查询分配了字体，您可能希望将代码更改为类似这样以在所有屏幕尺寸中应用该字体：

h2 {
   font-family: Ubuntu-L;
}

@media only screen and (max-width: 1500px) and (min-width: 1001px)
h2 {
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    color: white;
}