2017-04-18 114 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'? –