Fatal编程技术网
  • html/
  • Html 通过内联CSS加载外部字体

Html 通过内联CSS加载外部字体

html css fonts

Html 通过内联CSS加载外部字体,html,css,fonts,inline,font-face,Html,Css,Fonts,Inline,Font Face,是否可以通过内联CSS加载外部字体 注意：我不是说使用具有@font-face定义的外部CSS文件，而是类似以下内容： <h1 style="font-family:myfont; src:('http://example.com/font/myfont.tff')">test</h1> 测试 不，据我所知不是。您需要在块或外部CSS文件中声明此类内容 如果你想要这样的东西，很可能你做错了。如果你使用@font-face，你应该能够做这样的事情： CSS @fo

是否可以通过内联CSS加载外部字体

注意：我不是说使用具有
@font-face
定义的外部CSS文件，而是类似以下内容：

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>

测试
不，据我所知不是。您需要在
块或外部CSS文件中声明此类内容

如果你想要这样的东西，很可能你做错了。

如果你使用@font-face，你应该能够做这样的事情：

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;

}
确保包含字体-上面的示例已将所有字体放置在css文件的相对路径目录中

HTML

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
您应该能够找到免费的基于web的@font-face字体。

您不能在
样式
属性中包含
@font-face
规则（最狭义的是“内联CSS”）。根据HTML4.01规范，您根本不能在
body
元素中包含这样的规则（“内联CSS”）在更广泛的意义上包括。但是在实践中是可能的

实际上，如果在
主体
中包含
样式
元素，浏览器将对其进行处理，就像它位于语法正确的位置，即
头
元素中一样。它甚至“向后”工作，影响出现在它前面的元素

您甚至可以按照HTML5 CR的要求，将此方法（仅当您无法更改
标题时才应使用）正式更正。它是任何元素开头的
样式
元素，以流内容作为其内容模型。当前浏览器忽略
范围
属性

更新：以下内容不再相关，因为验证程序错误已修复

但是，W3C标记验证器和Validator.nu中存在一个漏洞：它们不允许在
正文
的开头使用
样式
。要克服此漏洞，并使您的文档在有效的同时进行验证，您可以使用额外的
div
元素：


<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>




/*您的@font-face和其他CSS规则位于此处*/


是否可以使用内联css加载外部字体？不可以使用外部css文件[…]

是的，您可以对Stephen Scaff中所示的一种或多种字体进行base64编码，并将其放入页面中的
样式
块中，以避免外部请求

如果您使用的浏览器支持此技术，也可以按照您描述的方式使用此技术


<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>




@字体{
字体系列：“PT Sans”；
字体风格：普通；
字体大小：正常；
src:local（'PT Sans'）、local（'PTSans-Regular'），
url（数据：application/font-woff2；charset=utf-8；base64，d09grgabaaaahowabmaaaaa+OAA）格式（'woff2'）；
}
@字体{
字体系列：“PT衬线”；
字体风格：普通；
字体大小：正常；
src:local（'PT Serif'）、local（'PTSerif-Regular'），
url（数据：application/font-woff2；charset=utf-8；base64，d09grgabaaaaiqyabmaaaaaaaaaa/MAA）格式（'woff2'）；
}


每一款现代浏览器，因此在可预见的未来，您可能只需要使用它。此外，这种技术将提高您的页面速度分数，但将降低总体性能（即使是第一页加载），除非您仅使用base64编码关键页面资产（例如，折叠上方显示的字体字形）还有其他的


就性能而言，您现在最好的选择是使用webfont样式表，并将其向下延伸。
在
style=
属性中进行声明有点重要；）您是否可以链接HTML 4.01规范中禁止此操作的相关部分（我想知道还有什么其他类型的内联css是不允许的）？@user2284570，我添加了一个关于
style
元素的说明，它可以被称为“内联CSS”，从更广泛的意义上说，CSS代码直接出现在HTML文档中，而不是出现在一个单独的CSS文档中，该文档仅在HTML中引用。HTML 4.01规则不允许
style
在
body
内部，因为它在规范中没有一个位置，因为除了
head
元素之外，任何内容模型都没有
style
元素。好的，谢谢你，现在，我的情况是
和
从web消毒液中剥离，但我可以在
style=“”
属性中放入任何内容。另外，如果在样式属性中使用
@import
，它会工作吗？@user2284570，不，
@import
在
样式
属性中不工作。
style
属性值只能由声明（name:value）组成，这些声明将应用于当前元素。
但是如果需要类似的内容，很可能是您做错了。
：在单个mediawiki页面上嵌入字体如何？@user2284570 mediawiki允许您定义自定义CSS文件IIRC。我已经很长时间没有使用它了。是的，但是他们只允许整个网站使用它。如果您有一个页面需要6Mb字体，那么它将加载到站点的所有页面中。@user2284570在这种情况下，您肯定是做错了。：-）这很有趣！我的问题是5年前的老问题，从那时起情况有点变化：）我现在无法验证它，但到目前为止我将假设它是“解决方案”。这仍然只是一个内联样式标记，而不是像他的示例那样内联css
base64编码字体可以放在
标记的任何位置，或者只是在标题中？很好的选择！我最终使用了