如何在Safari和FireFox中修复阿拉伯字体? [英] How to fix Arabic Font in Safari and FireFox?

问题描述

我的css文件中的字体是Google字体的@import.

I have a font that is @import from google fonts in my css file.

它在chrome中可以正常工作，但在safari和Firefox中却不能正常工作.

It's working fine in chrome but not fine in safari and firefox.

这是它的html:

/* Fonts */
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

<header class="container-fuild navbar-fixed-top">
  <div class="row gutter-20">
    <nav class="navbar-nav nav col-lg-3 pull-right">
        <div class="navbar"><img style="padding-top: 20px;" src="imgs/logo.png" alt="Logo" width="45"/>
          <br><br>
          <div id="droid">
            <h5 dir="rtl">مكتب محمد حسين شكري</h5>
            <h6 dir="rtl">للإستشارات المعمارية</h6>
          </div>
          <h5>Mohammed H Shukri</h5>
          <h6>Architectural Consultants</h6>
        </div>
        <ul class="nav nav-stacked col-lg-4" id="menu">
          <li data-menuanchor="page1" class="nav-item slide1"><a href="#page1" title="HomePage">Home</a></li>
          <li data-menuanchor="page2" class="nav-item slide2"><a href="#page2" title="About Shukri">About Us</a></li>
          <li data-menuanchor="page3" class="nav-item slide3"><a href="#page3" title="Projects">Our Projects</a></li>
          <li data-menuanchor="page4" class="nav-item slide4"><a href="#page4" title="Employees">Our Employees</a></li>
          <li style="margin-bottom: 15px;" data-menuanchor="page5" class="nav-item slide5"><a href="#page5" title="Contact Information">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</header>

在Chrome中显示如下:

in chrome it shows like this:

在firefox和safari中，如下所示:

In firefox and safari, like this:

推荐答案

尝试通过html导入字体.对于渲染而言，总是最好这样做.

Try importing fonts through html. It's always better to do that this way, for rendering.

这篇关于如何在Safari和FireFox中修复阿拉伯字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！