• 网站字体


    网站字体时常会涉及到侵权的问题,所以为了避免字体侵权,大多数网站都采用自己下载的字体。css针对网站引用自己的字体有专门的规定。

    @font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/

    src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('emotion.woff') format('woff'), /* chrome、firefox */

    url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */ }

    其中emotion为自己下载的字体名称; emotion.eot、emotion.woff、emotion.ttf、emotion.svg为下载的字体包含的格式。

    url('emotion.eot?#iefix') format('embedded-opentype') 中?#iefix的解释: #iefix有何作用?

    IE9 之前的版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,它无法正确的解析而返回 404 错误,而其他浏览器会自动采用自己适用的 url。

    因此把仅 IE9 之前支持的 EOT 格式放在第一位,然后在 url 后加上 ?,这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。

    至于 #iefix 的作用,一是起到了注释的作用,二是可以将 url 参数变为锚点,减少发送给服务器的字符。 为何有两个src? 绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。

  • 相关阅读:
    BOM和DOM的操作
    JS介绍
    CSS
    HTML的用法
    JSP获取json格式的数据报错 Uncaught SyntaxError: Unexpected identifier
    jquery.nicescroll.min.js滚动条插件的用法
    css鼠标滑过出现文字效果
    sublime text3安装js提示的插件
    利用after和before伪元素在文字两边写横线
    html+css居中问题
  • 原文地址:https://www.cnblogs.com/x123811/p/6892988.html
Copyright © 2020-2023  润新知