2017-04-18 120 views
9

我看到一些人回答How to use Apple's new San Francisco font on a webpage旧金山阿拉伯语网页字体的Windows

但给出的解决方案并没有与阿拉伯工作。 甚至包含来自外部库的字体作为网络字体的答案也不适用于阿拉伯语文本(在Windows 7上测试)。

这是文本如何阿拉伯语看起来像OSX塞拉利昂\火狐:

enter image description here

很漂亮,这是它的外观试图从外部库添加的字体在Windows 7/Firefox的后(如本answer给出):

enter image description here

看起来是堕落了,所以正在使用默认的Web浏览器的字体。

我想在我的网站中使用美丽的San Fransisco字体,所以它在OSX和Windows上看起来都一样。

回答

0

OK,我终于找到了字体,它被称为Geeza Pro,我从OSX Fonts文件夹中提取它,并将其发送到http://fontface.me,他们上传到自己的CDN,现在每个人都可以使用OSX的阿拉伯字体从这个链接:

https://www.fontface.me/font/info/geeza-pro

只要加入这个在标题:

<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=geeza-pro" />

CSS:

font-family: 'geeza-pro';

感谢大家的意见。

+1

你可以添加此链接从苹果论坛到答案:https://discussions.apple.com/thread/3420084?start=15&tstart=0 –

+0

看起来像写在这里的同一个人:http://hints.macworld.com/article.php?story=20111026025343144 – tinyCoder

+0

是的,看起来像它:)我完全看到这两个帖子,但没有读入他们太多... –

2

从链接的CSS代码中链接的字体直接指向苹果版本的字体,该字体与Windows不兼容(出于未知原因,但据推测字体规范中有某些内容阻止它从在其他平台上工作)。

你可能有更好的运气从这里手动下载的字体:

https://github.com/AppleDesignResources/SanFranciscoFont/issues/1

,然后使用TTF字体转换器,例如:

https://onlinefontconverter.com/

然后自己主办的字体,并相应地更新CSS。

+0

谢谢,我已经尝试过从你的链接下载字体,仍然没有显示阿拉伯字体,因为我在OSX上看到它,它显示像Arial! – tinyCoder

1

不同的网络浏览器使用不同的字体格式,要使它跨浏览器工作并且不可避免地需要相当复杂的技巧,您必须声明多个文件来源以满足所有浏览器的相同字体,最简单的方法是使用一台发电机,如字体,松鼠

https://www.fontsquirrel.com/tools/webfont-generator

为了获得最佳的支持利用这个来声明字体:

@font-face { 
    font-family: 'MyWebFontName'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

正如你所看到的,有支持的EOT 5种字体格式,W关闭,woff2,ttf和svg。您显然需要提供这些文件并相应地更新源网址。

有关的播放当前状态的更多信息对此有读: https://css-tricks.com/snippets/css/using-font-face/

这一条几乎是一岁,但据我了解,向后兼容性它仍然具有现实意义和正确性,上面的代码需要确保跨浏览器的字体一致性。

针对Web的TTF和SVG字体正在逐步淘汰,但对于旧版浏览器,仍然需要它们。为了让您放心,所有这些文件都不会在网页加载时下载。只有特定浏览器支持的字体格式的文件才会被下载。

+0

谢谢,我已经尝试过从下面发布的链接“Oskar”下载的字体,仍然没有显示阿拉伯字体,因为我在OSX上看到它,它显示为Arial! – tinyCoder

+0

您是否尝试过使用字体松鼠将您拥有的字体文件转换为Windows/ff/chrome等支持的其他格式?你需要SanFranciscoArabic字体(我不能在提供的链接上找到它)。 –

+0

...或者你可以使用谷歌网页字体提供的阿拉伯网页字体之一: https://fonts.google.com/?subset=arabic 其中一些看起来非常类似于你的例子中使用的类型。我希望这有帮助。 –

0

你可以尝试同样以旧金山字体提到Here

1

我是土生土长阿拉伯语扬声器和我了解一些阿拉伯字体另一种字体。

您不能使用San Francisco字体,因为它不支持阿拉伯字母。它在精细打印在苹果的排版文档:从该页面https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

报价

的iOS使用旧金山为拉丁语,希腊语和西里尔字母系统字体,以及其他各种字体的为其他脚本。

只有拉丁语,希腊语和西里尔字母字体(NOT旧金山)用于其他脚本

你必须选择实际支持阿拉伯字母不同的字体。在这种情况下,苹果公司使用我认为的Times New Roman Regular,它在Mac和Windows上本地支持,并且是OpenType fontTimes New Roman Regular看起来完全像您提供的图片中的字体。

+0

嗨,兄弟,谢谢你的回答,请看看“Times New Roman Regular”是如何在OSX上看到阿拉伯文字的:http://gulf-up.com/do.php?img = 310788,它甚至不是关!我真的很困惑我们在OSX上看到的阿拉伯文字体是什么字体。 – tinyCoder

+0

我找到了!它是“Geeza Pro”! – tinyCoder

+0

甜美!很高兴我能帮上忙。顺便说一下'New Times Roman'在字体书中看起来像这样,但在foontbook之外,没关系。你是怎么认为它是'Geeza Pro'? –