Question

在我的jQuery移动应用程序中，我想使用自定义字体系列，我已经厌倦了以下代码，但它没有用。如何在jQuery mobile中使用自定义字体文件？

请帮帮我

CSS

@font-face{

    font-family:'Roboto-Light';
    src: url("Fonts/Roboto-Light.ttf"); 
}

font {
    text-shadow:0 0 0;
    -moz-user-select: none; 
    -webkit-user-select: none; 
   font-family: "Roboto-Light" !important;
}

Answer 1

定义Roboto字体系列后，您必须将其作为页面上的默认字体应用：

body, .ui-btn {
    font-family: Roboto-Light;
}

确保您的路径Fonts/Roboto-Light.ttf正确无误。

如果您要连接到互联网，也可以使用谷歌字体，将这一行放在您的CSS中：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

此外，对于更多的跨浏览器解决方案，您可以获得字体的eot，woff和svg版本以及ttf，然后像这样定义新的字体：

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-regular-webfont.eot');
    src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-regular-webfont.woff') format('woff'),
         url('fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

以下是使用谷歌字体的 DEMO

Answer 2

您可以像在网页中一样进行操作。只需确保您的字体目录存在，并且您正确指向它。

有关如何正确操作的一个很好的例子，请点击此处：

http://www.fontsquirrel.com/

如何在jQuery mobile 1.4.0中使用自定义字体？

2 个答案: