Using @font-face CSS stylewith an Arabic font?

问题

I am writing the following CSS code to create font face style using an Arabic font, and i am using windows OS...

the problem that browsers doesn't read it, i am testing on chrome, firefox, explorer and opera... the four browsers doesn't recognize the font...

here is my CSS code...

@media screen, print { @font-face {
    font-family: 'FUFONT';
    src: url(../fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(../fonts/ScheherazadeRegOT.ttf) format("opentype");
    font-weight:bold; } }

and call it as follow...

.navigation ul li a {font-family: FUFONT, Arial, Helvetica, sans-serif; font-size:18px;}

what do you think the problem is?

回答1:

The short answer: till now there is no generator for arabic fonts so we can use it in web.

Farther explanation: when using http://www.fontsquirrel.com/fontface/generator with Expert:

Subsetting: No Subsetting.
CSS Formats: Smiley

you'll be able to see your Arabic font in the web pages with one problem: no letter reshaping which means that the letters of one word will not be joint together, because there's no generator till now support the required OpenType functionality for Arabic language.

回答2:

Now you can use Amiri Font ( http://www.phpandthecity.com/2012/12/use-font-face-with-arabic-font.html )

回答3:

Solution :

1- goto >>> http://www.fontsquirrel.com/fontface/generator

2- upload your font on expert mode

3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting

4- Download your files

5- past this code into your css file :

  @font-face {
         font-family: 'Name of your font';
         src: url('url to your font.woff') format('woff');
         font-weight: normal;
         font-style: normal;
    }

6- call your font and apply it on some element

ex :

h1{
   font-family : "name of your font" ;
}

Enjoy it !

来源：https://stackoverflow.com/questions/7246973/using-font-face-css-stylewith-an-arabic-font

标签

css

css3

font-face

arabic