CSS高級OTF功能不起作用

我有以下HTML + CSS源代碼。我希望它使用高級otf功能，但樣式集功能不起作用。CSS高級OTF功能不起作用

<style> 
body { font-family: source sans pro; font-size:12px } 
.advotf { -moz-font-feature-settings: "ss01" 1; -moz-font-feature-settings: "onum" 1; } 
</style> 
<body> 
<p>Regular 1234567890</p> 
<p class="advotf">advanced 1234567890</p> 
</body>

另外，包含這些功能的計算機上的免費字體無法以任何方式工作。

來源

2014-05-04 Carlos Eduardo

你的HTML目前不完全形成了。將整個文檔包裝在'html'標籤中，並將'style'標籤包裹在'head'標籤中 - 不知道這是否會導致你的問題，但它不會幫助... – dav1dsm1th

@ dav1dsm1th：基於術語「格式良好」我想你在想XHTML。雖然這些規則適用於XHTML，但它們不適用於HTML（HTML沒有格式良好的概念）。如果有的話，唯一缺少的是doctype頭和標題元素，否則其餘的標記是有效的，不應該導致問題。 – BoltClock

@BoltClock我相信你是對的 - 我剛剛看到問題和不一致的地方，如果'html'和'head'標籤被忽略或者形成的很糟糕，文檔被解釋的方式不一致。沒有'doctype'（正如你指出的那樣）並不理想。 – dav1dsm1th

有涉及到幾個問題：

Support to OpenType features在瀏覽器中是有限的，以獲得最佳的覆蓋範圍，你應該使用-webkit-前綴版本（IE瀏覽器）除了非前綴版-moz-前綴版本。
屬性設置不是累積的。當一個規則包含一個屬性的多個設置時，根據一般的CSS原則，只有最後一個規則才生效。您需要將這些設置合併到一個聲明中。
雖然Source Sans Pro有幾個OpenType功能，但它們不受Google託管版本的支持。這是Google字體的一個常見問題。
儘管FontSquirrel @font-face generator具有用於啓用OpenType功能的專家設置，但這並不意味着啓用它們以用於CSS屬性。相反，他們將設置硬連線到字體文件中。因此，您可以生成啓用了onum（舊式號碼）的Source Sans Pro的字體文件，但這些文件使用舊式號碼。爲不同的設置生成不同的字體文件可以解決這個問題，但這將會相當尷尬。也許有一種字體文件生成器對OpenType功能有真正的支持，但我沒有遇到過。

你可以做的是使用託管在你自己的服務器上的.ttf文件。也就是說，下載所有將使用的字體的.ttf文件，將它們上傳到服務器上，並在@font-face規則中引用它們。不利的一面是，那麼在不支持support to .ttf的瀏覽器上，對於可下載的字體，最重要的是IE 8和更老的（以及Android 2.1），Source Sans Pro將不會被使用。也許更重要的是，渲染的質量可能比使用其他字體格式如.wof更糟糕。

演示，使用單個（常規）字樣：

<!doctype html> 
<style> 
body { font-size: 18pt } 
@font-face { 
    font-family: 'Source Sans Pro'; 
    src: url('sourcesanspro-regular-webfont.ttf') format('truetype'); 
} 
p { 
    font-family: 'Source Sans Pro', sans-serif; 
} 
.otf { 
    -moz-font-feature-settings: "ss01" 1, "onum" 1; 
    -webkit-font-feature-settings: "ss01" 1, "onum" 1; 
    font-feature-settings: "ss01" 1, "onum" 1; 
} 
</style> 
<p>Hello world! Look at my l’s and numbers: 1234567890.</p> 
<p class=otf>Hello world! Look at my l’s and numbers: 1234567890. (OTF enabled)</p>

來源

2014-05-04 05:37:03

CSS高級OTF功能不起作用

回答

相關問題