我应该为我的网站使用什么字体格式 [英] What font format should I use for my site

问题描述

我想为我的网站使用字体，我得到了整体研究和发现字体的各种格式，现在我想知道什么是标准格式？
或者什么是标准格式？

  .TTF（True Type Font）
 .EOT OpenType）
 .OTF（打开字体）
 .SVG（可缩放矢量图形）
 .WOFF（Web打开字体格式）
  

到目前为止，我使用了所有这些格式，如下：

 code> @ font-face {
 font-family：'Font'; 
 src：url（'Font.eot'）; / * IE9兼容模式* / 
 src：url（'Font.eot？＃'）format（'eot'），/ * IE6-8 * / 
 url（'Font.ttf'）format （'truetype'），/ * Saf3-5，Chrome4 +，FF3.5，Opera 10+ * / 
 url（'Font.woff'）格式（'woff'），/ * FF3.6 +，IE9 ，chrome6 +，Saf5.1 + * / 
 url（'Font.otf'）格式（'opentype'），
 url（'Font.svg'）格式（'svg'）; 
} 
  

但在这种情况下，网站太重

解决方案

了解如何进行优化？字体文件类型

• WOFF / WOFF2

WOFF字体的载入速度通常比其他格式快，因为它们使用OpenType（OTF）和TrueType（TTF）字体使用的压缩版本的结构。

• SVG / SVGZ

非常适合移动使用

• EOT

仅由IE支持

• OTF / TTF

WOFF格式最初是作为对OTF和TTF的反应创建的，

• 在其他方面：

ul>



Google Fonts提供这种方式来使用其字型。






• 一些效能提示






观看文件大小





字体可以惊人的重对于提供较轻版本的选项。例如，有利于50KB的字体集，而重量为400KB的字体集。
如果可能，限制字符集





你真的需要一种字体的粗体和黑色权重吗？限制你的字体集只加载使用是一个好主意，这里有一些好的提示。
考虑小屏幕的系统字体





许多设备停留在肮脏的连接上。





在这个例子中，小于1000像素的屏幕将被提供一个系统字体，而屏幕






• 结论：
  使用OTF / TTF（所有浏览器） EOT（I.E）用于桌面屏幕，并为小屏幕使用系统字体，因为它们呈现得更快。
  并考虑google字体。目前为止的最佳选择。





I want to use a font for my website, I got the overall research and found variety of formats for fonts, Now i want to know that what is the standard format? Or What are the standard formats?

.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)

So far, I've used all of these formats, something like this:

@font-face {
    font-family: 'Font';
    src: url('Font.eot'); /* IE9 Compat Modes */
    src: url('Font.eot?#') format('eot'), /* IE6–8 */
         url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
         url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('Font.otf') format('opentype'),
         url('Font.svg') format('svg');
}

But in this case, the site is too heavy (size of all formats is almost 1MB) , So what should i do to be more optimized ?

解决方案

Understanding Font File Types

• WOFF / WOFF2

WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

• SVG / SVGZ

ideal for mobile use

• EOT

supported only by IE

• OTF / TTF

The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied

• ON THE OTHER SIDE:

Google Fonts offers this as a way to use their fonts.

• SOME PERFORMANCE TIPS

Watch the file size

Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB. Limit the character set, if possible

Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here. Consider system fonts for small screens

Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.

In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.

• CONCLUSION: Use OTF/TTF(all browsers) & EOT(I.E) for Desktop screens and use system fonts for small screens as they render faster. And do consider google fonts. Best choice so far.

这篇关于我应该为我的网站使用什么字体格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！