html – 电子书阅读器没有捕获epub文件的嵌入字体

前端之家收集整理的这篇文章主要介绍了html – 电子书阅读器没有捕获epub文件的嵌入字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
那里,

我的epub阅读器有问题,它正确显示所有内容,但它没有捕获css文件中的嵌入字体.

当我在其他阅读器上运行相同的文件时,显示嵌入的字体但是当我在其中一个浏览器上运行html文件时,如firefox它显示与我的应用程序相同的结果,并且它不显示嵌入的字体.

这是一个示例html内容

<html  dir="rtl"   xml:lang="ar"   lang="ar"  xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=1332,height=794" />
        <title>the-title-3</title>
        <link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
    </head>
    <body id="the-title-3" lang="en-GB" xml:lang="en-GB" style="width:1332px;height:794px">
        <div id="_idContainer003">
            <img class="_idGenObjectAttribute-1 _idGenObjectAttribute-2" src="image/inner_cover_and_credits_page.jpg" alt="" />
        </div>
        <div id="_idContainer004">
            <div style="width:11599.37px;height:2993.39px;position:absolute;top:0px;left:0px;-webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px,3.93px) rotate(0deg) scale(0.05);transform-origin: 0% 0%; transform: translate(0px,3.93px) rotate(0deg) scale(0.05);">
                <p class="Basic-Paragraph ParaOverride-1"><span id="_idTextSpan000" class="CharOverride-1" style="position:absolute;top:13.65px;left:3168.24px;">الجملة الرئيسية في النص </span></p>
                <p class="Basic-Paragraph ParaOverride-1"><span id="_idTextSpan001" class="CharOverride-1" style="position:absolute;top:733.65px;left:831.71px;">&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;الكاتبة</span></p>
            </div>
        </div>
    </body>
</html>

这是相应的css文件

@font-face {
    font-family:"Futura Lt BT";
    font-style:normal;
    font-weight:normal;
    src : url("../font/FuturaBT-Light.TTF") format('truetype');
}
@font-face {
    font-family:"GE SS Text Light";
    font-style:normal;
    font-weight:300;
    src : url("../font/GESSTextLight-Light.otf") format('opentype');
}
@font-face {
    font-family:"GE SS Text Medium";
    font-style:normal;
    font-weight:500;
    src : url("../font/GESSTextMedium-Medium.otf") format('opentype');
}
@font-face {
    font-family:"Simplified Arabic";
    font-style:normal;
    font-weight:bold;
    src : url("../font/SimplifiedArabic-Bold.ttf") format('truetype');
}

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,pre,code,blockquote         {
    margin:0;
    padding:0;
    border-width:0;
    text-rendering:optimizeSpeed;
}
div.Basic-Text-Frame {
    border-style:solid;
}
p.ParaOverride-1 {
    line-height:1;
    white-space:nowrap;
}
span.CharOverride-1 {
    color:#000000;
    font-family:"GE SS Text Medium",sans-serif;
    font-size:420px;
    font-style:normal;
    font-weight:500;
}

请在下面找到文件布局的屏幕截图:

要在UIWebView中加载html的内容

[readingWebView loadHTMLString:contents baseURL:baseURL];

我在其他阅读器上提交的文件和我在我的应用程序中使用的文件之间唯一的区别就是我提交了一个格式为.epub的文件到iBooks这样的其他阅读器,而我在我的文件上使用扩展名为.zip的同一文件应用.但我不确定这是否相关.要在epub中显示html文件内容,我使用UIWebView.

任何提示或指导表示赞赏.

解决方法

我可以确认这个问题.我用2种不同的阿拉伯字体( “Arabic Magic”“Mcs Book Title 3”)尝试了你的HTML和CSS(改编).这些是TTF字体,但也没有用.

应用后,Web Inspector控制台中没有错误,字体加载良好.同样在应用时我实际上看到默认字体有点变化:它增加了字母之间的间距,就是这样.当我在macOS上尝试使用Firefox和Chrome时也是如此.

我的猜测是,我们尝试的那些字体很可能不包含显示所需字符的所有字形,或者在浏览器引擎(包括UIWebView)成功检测和呈现字体之前需要以某种方式处理字体.

我知道这不是一个明确的答案,但我只是在这里分享我的研究.希望有助于继续深入研究这个问题.

相关问题:

> Using Arabic fonts with the extension .otf
> How to fix Arabic Font in Safari and FireFox?
> Custom Arabic font in iOS
> Arabic text with custom fonts in iOS

更新:还尝试了windows-1256阿拉伯语编码(重新编码HTML,并应用了元字符集),因为我认为utf-8对于这些字体可能过于复杂,但得到了相同的结果:文本使用一些默认字体呈现.

猜你在找的HTML相关文章