我怎樣才能創建一個字體，其中包括字形字體大小的100％高度？

Question

我目前正在開發自己的自定義字體使用符號和其他圖形，我想基於矢量是。問題是如何創建一個字形，其字形覆蓋給定字體大小的整個高度。

如果我有一個40px高度的塊，並將font-size和line-height設置爲40px，我希望字形的最頂部位於塊頂部，最底部位於塊的頂部塊的底部。換句話說，字形應垂直完全覆蓋相同高度的塊，給定相同的font-size/line-height。

好了，問題是，它不... 我試圖基線和下降設置爲0，並設置x高度，大寫高度和上升到1500例如如果我再畫我所有的字形在這些垂直線之間，它們都顯示出所需的方式。除了在Mac上！在Mac FF中，它們抵消了頂部約50％。在Safari和Chrome中，除非您設置「display：inline-block」而不是「display：block」，否則它們完全不顯示。

我也試圖在3.2類型建立一個完全新的字體，使用默認的指標等，這在我看來，下降線決定在字形的底部，最尖端呈現。另一方面，頂部似乎處於頂蓋高度和上升線之間的某處，但更多位於頂蓋高度。如果我從下降到上升畫出字形，字形頂部將被切掉。如果我從下降到帽高繪製一個字形，塊頂和字形頂部之間會有一個空格。

有沒有我可以申請任何「標準」的指標，我應該怎麼定位我的字形得到它如上所述？

的字體在它的一個副本的當前狀態所在的位置：
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/Custom-Icon.ttf

編輯： 工作示例可以在這裏找到：
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/index.html

左塊包含我的自定義字體的元素（情況a）。下一個塊包含Twitter Bootstrap中使用的字體中的一個元素（情況b）。最後兩個塊（情況c和d）包含來自我使用的類型3.2的默認設置的測試字體的元素。第一個測試元素（c）在下降線處具有最低點，並且在帽高度線處具有其最高點。最後一個元素（d）在基線處具有其最低點，並且在x高度線處具有其最高點。

它是如何呈現在Ubuntu和Windows7的所有瀏覽器（在Ubuntu的這種情況下，FF）：

這是所期望的行爲！

它是如何呈現在FF在Mac上：

它是如何呈現在Mac上的Safari：

由於兩個B，c和d在所有瀏覽器呈現相同的和所有操作系統，在我看來，我自己的自定義字體缺乏和/或在度量標準中存在一些矛盾的信息，以使其一致呈現。

Answer 1

原來有幾個指標，有爲了得到一個字體工作要應用在所有平臺上。什麼似乎已經完成的技巧是在高級指標部分設置hhea/typo ascender。

我已經添加了我應用的設置併爲我工作的一些屏幕截圖。所述下降線被設置爲0和上升線以及所述帽高度和x高度都被設置爲1250。我選擇1250，因爲我先前搜索的字體有此號碼，但只要它在所有的攀登和高度上都是一樣的，似乎並不重要。我認爲x高度在我的情況下並不重要，因爲所有的字形都設置爲相等的高度。也許瓶蓋的高度也不是必要的，請放下評論！

我還添加了我的FontSquirrel設置的屏幕截圖。我不確定哪些部分是必要的，但我更喜歡安全。我取消了「Fix Vertical Metrics」選項，因爲它很可能是一個不需要的「黑盒子」。 x高度匹配設置爲無，但可能並不重要。

重要的是Base64編碼設置。沒有這個，你不能從另一個域加載字體，這是由於瀏覽器實現SOP（同源策略）。更多關於這裏：@font-face fonts only work on their own domain。

我真的不知道是否有必要使用我創建字體時使用的相同Em平方值，但它看起來很合理。坦率地說，我甚至不知道它是什麼意思...... :-)

如果你覺得你可以有助於更好地理解這些指標，或者如果有任何錯誤/不必要的值設置，請添加評論！

字體度量設置在類型3.2

高級字體規格設置在類型3.2

銘文例如

Answer 2

在字體圖標的高度由font-size確定。將其設置爲40px，並且您的圖標將爲40像素高。這與任何字體度量無關，如基線高度。唯一的條件是你的圖標的設計應該覆蓋完整的「畫板」1高度。你鏈接的字體這樣做，所以問題不在於此。

很可能您遇到了Firefox-on-Mac特定的問題。如果您發佈了一個示例，或許熟悉該設置的人可以提供幫助？

1我已經從Illustrator中使用術語「Artboard height」。這是畫布的高度：（左圖標全高度，右邊的圖標是不是）

Answer 3

您可以使用Icommoon app。它允許您使用直觀的Web界面中現有字體的字形，導入的SVG等創建自己的自定義字體。我自己使用它來創建Emoji icon font以及項目特定的圖標字體。

使用Icomoon應用程序，可以在矩形網格中對每個字形進行鏡像，旋轉，調整大小或重新定位。網格本身也可以調整大小。請參閱下面的截圖，瞭解該界面的概述。