Question

所以我正在使用WordPress网站，在每个页面上我都有一个H1标签来表示该页面的标题。我使用@ font-face的特殊字体，它在每个浏览器的窗口都很好用，但是当我切换到mac时，它不会显示h1标签只是空白区域。我已经在safari中测试了这个并且在多个mac上测试了chrome，并且它没有对它们中的任何一个进行测试。如果我改变字体让我们说Arial它很好用，如果我设置有一个后退字体它不起作用。如果我更改h1，h2，h3标签以使用NorthBergen-Light它的效果很好，它只是NorthBergen不起作用而且两者的代码完全相同。在我的研究中，我发现有些人说他们在删除所有引号时都取得了成功，但是当我这样做时，它只是打破了一切。我无法弄清楚为什么NorthBergen-Light工作得很好但NorthBergen没有。

        @font-face {

            font-family: 'NorthBergen';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');

            src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');

        }

                @font-face {

            font-family: 'NorthBergen-Light';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');

            src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');

        }

                    .services .services-inside .services-title{

                font-family: 'NorthBergen' !important;

            }

                    h1, h2, h3{

                font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;

            }

                    footer.main-footer .widget .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

                    h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

所以我通过使用fontsquirrel并将所有文件放入我的FTP并将css文件改为看起来就可以了。

@font-face {

            font-family: 'NorthBergen';
            font-style: normal;

            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
             url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');

        }

Answer 1

对Wordpress一无所知，但您可能需要对所有浏览器进行一些字体转换：

@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8  */
         url('../fonts/Min_font/Min_font.woff') format('woff'),  /* Newer browsers */
         url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini  */
         url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}

尝试使用fontsquirrel：http://www.fontsquirrel.com/tools/webfont-generator

Answer 2

我意识到这个问题是几年前的 - 但我在找出解决方案时使用了这个线程作为参考，所以我想我会在这里分享以防止其他人未来的挫败感 -

对我来说，除了在我的 iphone 上，所有字体都可以使用，我必须删除字体代码的 svg 部分中的 ID 并将其保留为上传的 .svg 文件。例如在上面的代码中，svg 部分将显示为：

    url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');

意思是我删除“#”和它后面的ID。

我尝试了其他所有方法 - fontsquirrel、transfonter，以多种方式更改了 url 路径。这是唯一有效的方法 - 我花了一周时间才弄明白：0

它可能也是唯一对你有用的东西。

Answer 3

改变路径后开始为我工作。

fontsquirrel给出的路径没有./ 添加后，它可以工作：

@font-face {
    font-family: 'montserratblack';
    src: url('./montserrat-black-webfont.woff2') format('woff2'),
         url('./montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@ Font-face不在IOS上工作

3 个答案: