logo标签列表

如何在CSS中使用阿拉伯字体？

cssfontsarabicwebfonts
7

我刚发现没有阿拉伯字体的生成器，因为连接字母的问题...这是否意味着我唯一的选择是从fonts.com获取？有人知道其他地方可以获取高质量的阿拉伯字体用于我的网站吗？

#ArbText01 {
    position:absolute;
    top:130px;
    right:10px;
    font-family:adobe arabic;
    font-size:30px;
    color:#fb5e08;
    padding-top:0px;
    padding-bottom:0px;
    direction:rtl;
}

<div id='ArbText01'>ةالفصح
        </div>

http://arabic001.com/home.html

1
将字体名中含有空格的用引号括起来 ("Adobe Arabic")。同时请注意名称中的大写字母。 - Tom van der Woerdt
1
可能是什么是阿拉伯语的“网络字体”选择？的重复问题。 - Peter O.
5个回答
7

这里有一种简单的方法来在CSS中获取字体：

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.droid-arabic-kufi {
  font-family: 'Droid Arabic Kufi', serif;
}

Look at http://fonts.googleapis.com

5
你说的阿拉伯字体是指什么？我们日常使用的大部分“正常”字体在CSS中都能很好地发挥作用。但一定要确保在必要时设置RTL属性。毕竟，你不希望阅读阿拉伯语的人从左到右阅读，对吧？ :-) <html dir="rtl"> （与英文网站结合使用看起来有些奇怪，但这是你需要为阿拉伯语和其他RTL语言所做的）。
我现在非常困惑。也许我应该澄清一下。我想在同一页上使用阿拉伯文和英文。因此，我理解了方向性问题。如果我不喜欢电脑上的阿拉伯字体，我从哪里获取字体？另外，我得到的是乱码而不是阿拉伯文。我会在我的问题中发布我的代码和网址。 - L1900
请确保您使用Unicode（最好是UTF-8）和实际支持阿拉伯语的字体。我没有下载阿拉伯字体的经验，也不确定这是否是SO上适当的问题。 - Tom van der Woerdt
3

您应该提供这样的字体：

@font-face {
    font-family: 'mywebfont';
    src: url('adobe_regular.eot');
    src: url('adobe_regular.eot?#iefix') format('embedded-opentype'),
         url('adobe_regular.woff') format('woff'),
         url('adobe_regular.ttf') format('truetype'),
         url('adobe_regular.svg#adobe_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

现在你应该使用'mywebfont'作为字体系列。

1

你总能从某个地方找到免费的字体。我相信快速的谷歌搜索会得到很好的结果。如果你想让它们正常工作，你需要研究UTF-8编码，以便所有字符都能正确显示。

1
有人刚刚提到了UTF-8编码。你们都说我应该使用它。在哪里？怎么用？这是我要写的代码吗？还是需要下载？我从未听说过它。 - L1900
我相信这是HTML编码。我不经常使用HTML，所以无法告诉你。快速的谷歌搜索会提供大量有用的信息。 - Marc DiMillo
我查看了我的html文件，它是以UTF-8编码（我选择“另存为”时显示的）的。我还访问了以下链接，他们说我需要声明一下。http://www.w3.org/International/questions/qa-html-encoding-declarations#httpsummary 我该怎么做呢？但阿拉伯文本仍然显示为其他内容。 - L1900
1
我将展示如何轻松将"droidarabickufi"字体集成到您的CSS文件中，并且如何轻松地将其应用于整个文档（而不是应用于单个类）。首先，在您的CSS文件顶部添加此行...
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

然后将该规则应用于“HTML”标签（以应用于整个文档）。
html{font-family: 'Droid Arabic Kufi', serif;font-size:100%;}

注意：您需要检查是否有其他类使用自定义字体家族，例如“Tahoma”、“Sans”、“Arial”或其他字体。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接