发表新帖
发表新帖

How to add some non-standard font to a website?

后端 未结
关注
19 1339
时光说笑
时光说笑 2020-11-22 02:17

Is there a way to add some custom font on a website without using images, Flash or some other graphics?

For example, I was working on a wedding website, and I found

相关标签:
19条回答
  • 忘了有多久
    2020-11-22 02:50

    Just simply provide the link to actual font like this and you will be good to go

    <!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
    0 讨论(0)
  • 不思量自难忘°
    2020-11-22 02:50 
    @font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}
    0 讨论(0)
  • [愿得一人]
    2020-11-22 02:52

    You can add some fonts via Google Web Fonts.

    Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).

    For example:

    In the <head> section:

     <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

    Then in CSS:

    h1 { font-family: 'Droid Sans', arial, serif; }

    The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.

    0 讨论(0)
  • 温柔的废话
    2020-11-22 02:52

    Typeface.js JavaScript Way:

    With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images

    Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

    http://typeface.neocracy.org/

    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-22 02:53

    The technique that the W3C has recommended for do this is called "embedding" and is well described by the three articles here: Embedding Fonts. In my limited experiments, I have found this process error-prone and have had limited success in making it function in a multi-browser environment.

    0 讨论(0)
  • 太阳男子
    2020-11-22 02:55

    Typeface.js and Cufon are two other interesting options. They are JavaScript components that render special font data in JSON format (which you can convert from TrueType or OpenType formats on their web sites) via the new <canvas> element in all newer browsers except Internet Explorer and via VML in Internet Explorer.

    The main problem with both (as of now) is that selecting text does not work or at least works only quite awkwardly.

    Still, it is very nice for headlines. Body text... I don't know.

    And it's surprisingly fast.

    0 讨论(0)
 看不清?
提交回复
热议问题