Question

问题：@ font-face字体名为＆＃39; Ubuntu-L＆＃39;虽然在PC桌面上加载，我的HTC One Android 5.0.2上没有加载，这是我的页面：piotrdeja.pl您可以在手机上查看它，看看我的意思。

我的页面作为wordpress主题，这里是我的functions.php摘录，虽然@ font-face直接在style.css中声明。的functions.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;
}

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

1 个答案: