Loading an external font via inline CSS

后端未结

关注

 4  1781

没有蜡笔的小新

Is it possible to load an external font via inline CSS?

Note: I\'m not talking about using an external CSS file with a @font-face definition, b

相关标签:

4条回答

旧时难觅i

2020-11-28 11:22

No, not that I know of. You will need to declare this kinds of things on a <style> block or an external CSS file.

Though if you want something like this, it's very probable you're doing it wrong.

0 讨论(0)
发布评论:

提交评论
- 加载中...
灰色年华

2020-11-28 11:23
Is it possible loading an external font with inline css? NOT with an external CSS file [....].

Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.

It may also be possible to use this technique in the way you describe if the browser you're using supports it.
```
<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>
```
Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.

Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-11-28 11:38
You cannot include a @font-face rule in a style attribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includes style elements). But in practice it is possible.

In practice, if you include a style element inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the head element. It even works “backwards”, effecting elements appearing before it.

You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.

Update: the following is not relevant any more, since the validator bug has been fixed.

However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:
```
<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>

</div>
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

轻奢々

2020-11-28 11:44

If you use @font-face, you should be able to do something like this:

CSS

@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/raleway_thin-webfont.woff') format('woff'),
     url('fonts/raleway_thin-webfont.ttf') format('truetype'),
     url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;

}

Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.

HTML

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

You should be able to find free web-based @font-face fonts here.

0 讨论(0)