开发者

Using font in Web

开发者 https://www.devze.com 2023-01-06 19:00 出处:网络
Can anyo开发者_如何学Gone tell me how to unify the font I use in all browsers in different operating systems ??There is also a similar service from Google:

Can anyo开发者_如何学Gone tell me how to unify the font I use in all browsers in different operating systems ??


There is also a similar service from Google:

Google Font API

For now it supports only a few fonts, but it is really simple to use.


The simple answer is to add this CSS:

body { font-family: Arial, Helvetica, sans-serif; }

That tells the browser to first look for Arial, then if that's not available use Helvetica (a MAC font that looks like Arial), and then if that's still not available to use a sans-serif font, meaning a non-footed font (Times New Roman is a footed font).

There are only a few cross-browser compatible fonts available now: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

As posted earlier, the Google Font API is a good alternative as well.


Modern browsers support downloading fonts which can be used in any web pages - More here: https://developer.mozilla.org/en/css/@font-face


to use different font you can use font squirrel service font squirrel link

in font squirrel go to @font-face kits or you have your own font to put go to @font-face generator and upload your font and generate your font pack


Take a look at the @font-face declaration in CSS.

There’s a good overview on A List Apart:

  • http://www.alistapart.com/articles/fonts-at-the-crossing

@font-face isn’t super-simple:

  • different browsers support different font formats (a bit like video in HTML5)
  • and slightly different syntaxes
  • and a lot of commercial fonts aren’t licensed for use on the web

However, there are services like Font Squirrel, TypeKit and others that help simplify it.


If you want a Javascript solution, try: Typeface.js I have seen a couple web designers use this (for headers and small font areas, but not full page fonts, as this js has some limitations).

Give it a look, may fit your need. However users without JS enabled will not take advantage of it.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号