在网站中使用字体
我知道我可以“免费”使用像 arial
这样的字体。但是如果我想使用非标准字体怎么办?
这是浏览器应该支持的东西吗?
例如,我可以在哪里查看 Firefox 3.6.3 支持哪些字体?
例如,我想更改输入文本区域的字体。
I know that I can use fonts like arial
"for free". But what if I want to use not a standard font ?
Is that something that a browser should support ?
Where I can check, for example, which fonts Firefox 3.6.3 supports ?
I would like, for example, to change the font of input text area.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
浏览器不支持字体;他们得到系统的支持。您的用户要么在整个计算机上安装了 Comic Sans,要么根本没有安装。
但是,新的 CSS3 规范允许您使用您的网页。不过,目前只有最新版本的 Firefox、Safari、Google Chrome 和 Opera 支持它。
但在某种程度上,这并不重要。您可以嵌入字体,并且拥有最新技术的用户可以享受它,否则他们将获得后备字体。除了徽标之外,您的设计通常不应完全取决于字体,对吧?
Fonts aren't supported by browsers; they're supported by systems. Either your user has Comic Sans installed across their entire computer, or they don't have it installed at all.
However, the new CSS3 spec allows you to distribute your own fonts with your webpage. It's currently only supported by the latest versions of Firefox, Safari, Google Chrome, and Opera, though.
To some extent, though, this shouldn't matter. You can embed the font, and users with the latest technology get to enjoy it, or else they get the fallback font. Beyond logos, your designs typically shouldn't hinge on fonts entirely, right?
有一些网站有一个简单的界面,可以为 Windows、Mac 或两者创建 CSS 类型,并提供大多数 Web 用户使用的相对“安全”的字体选项。
查看:http://www.typetester.org - 它有一个方便的预览界面和“导出到 CSS” ' 选项。
请记住,移动设备正在不断增加,使用自定义字体(至少 CSS2)可能会产生好坏参半的结果。
There are a few sites out there that have an easy interface for creating type CSS for Windows, Mac, or both, with relatively 'safe' font options that are used by the majority of web users.
Check out: http://www.typetester.org - it has a handy preview interface and 'export to CSS' options.
Keep in mind that mobile devices are on the increase and using custom fonts (CSS2 at least) may have mixed results).
唯一普遍支持的“字体”是
serif
、sans-serif
和monospace
。如果您想要其他更奇特的东西,那么要么试试运气并指定它,要么嵌入它 。The only "fonts" that are universally supported are
serif
,sans-serif
, andmonospace
. If you want anything else fancier then either try your luck and specify it, or embed it.或者您可以尝试的一个技巧是,如果您使用该字体来显示少量文本,您可以进入 Photoshop,使用您想要的字体键入文本,然后(取决于颜色的种类)保存它作为图像文件。如果是少量文本,下载速度可以忽略不计。
对于黑白文本,我个人喜欢 gif 格式,对于彩色文本,我会使用 jpg 或 png(尽管我开始越来越喜欢 png)。
抱歉,我刚刚意识到您想要更改输入文本区域的字体(没有阅读最后一行),但对于标准 html 页面上的任何其他文本,此方法应该可以。
Or one trick that you can try is that if you're using the font for a small amount of text, you can go into photoshop, type the text using the font you want, and then (depending on the variety of colors) save it as a image file. If for a small bit of text, the download speed is negligent.
For black and white text I personally like gif format, colorful ones I would use jpg or png (although I'm starting to like png more and more).
Sorry, I just realized you want to change the font of the input text area (didn't get to read the last line), but for any other text like on a standard html page, this method should do.
浏览器不必支持它,它们会渲染它,操作系统会为您显示正确的字体。
当您使用非标准字体时,该字体很可能没有安装在用户的系统上。因此,您应该使用标准字体,例如 serif、sans-serif 等。
但是,如果您想使用非标准字体,那么您应该告诉用户何时获取该字体,这根本不是一个好的做法。
在
font-family
css 样式中,您可以指定用逗号分隔的字体名称,例如:在上述情况下,如果自定义
fancy
字体在用户系统上可用,则将被使用,否则arial
将被使用,依此类推。最后,看看:
sIFR – 在您的网站中安全地使用自定义字体
Browsers do not have to support it, they render it, it is the operating system which shows the right font for you.
When you use non-standard font, it is highly possible that that font may not be installed on users' system. Therefore, you should go for standard fonts such as serif, sans-serif, etc.
If however, you want to go for non-standard font, then you are expected to tell user's when to get that fon't from which is not a good practice at all.
In the
font-family
css style, you can specify font names separated by commas like:In the above case, if custom
fancy
font will be available on users' system, it will be used elsearial
will be used and so on.Finally, have a look at:
sIFR – Use custom fonts in your website safely