精华内容
下载资源
问答
  • @font-face @font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就...

    @font-face

    @font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。

    通过允许作者提供他们自己的字体,@font-face 让设计内容成为了一种可能,同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体,同时在不依赖网络情况下实现此功能。

    在同时使用url()和local()功能时,为了用户已经安装的字体副本在需要使用时被使用,如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。

    @font-face 规则不仅仅使用在CSS的顶层,还可以用在任何CSS条件组规则中.

    @font-face {
      font-family: "Open Sans";
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }

    Copy to Clipboard

    概述

    这是一个叫做@font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

    语法

    @font-face {
      [ font-family: <family-name>; ] ||
      [ src: <src>; ] ||
      [ unicode-range: <unicode-range>; ] ||
      [ font-variant: <font-variant>; ] ||
      [ font-feature-settings: <font-feature-settings>; ] ||
      [ font-variation-settings: <font-variation-settings>; ] ||
      [ font-stretch: <font-stretch>; ] ||
      [ font-weight: <font-weight>; ] ||
      [ font-style: <font-style>; ] ||
      [ size-adjust: <size-adjust>; ] ||
      [ ascent-override: <ascent-override>; ] ||
      [ descent-override: <descent-override>; ] ||
      [ line-gap-override: <line-gap-override>; ]
    }

    where
    <family-name> = <string> | <custom-ident>+

    取值

    font-family

    所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )

    src

    远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体,将会尝试其他来源,直到找到它。

    font-variant (en-US)

    font-variant value.

    font-stretch (en-US)

    font-stretch value.

    font-weight (en-US)

    font-weight value.

    font-style

    对于src所指字体的描述。如果所需字体符合描述,则采用本font-face所定义的字体。

    unicode-range (en-US)

    在该@font-face中定义的unicode字体范围

    示例

    下面的例子简单定义了一个可下载的字体,并应用到了文档的整个body标签上。

    <html>
    <head>
      <title>Web Font Sample</title>
      <style type="text/css" media="screen, print">
        @font-face {
          font-family: "Unifont";
          src: url("unifont-14.0.01.ttf");
        }
    
        body { font-family: "Unifont", serif }
      </style>
    </head>
    <body>
    <h1>
    GNU Unifont 是 GNU 项目的一部分。 此页面包含最新版本的 GNU Unifont,以及 Unicode 基本多语言平面 (BMP) 中每个可打印代码点的字形。 BMP 占用 Unicode 空间的前 65,536 个代码点,表示为 U+0000..U+FFFF。补充多语言平面 (SMP) 的覆盖范围也在不断扩大,范围为 U+010000..U+01FFFF,以及 Michael Everson 的 ConScript Unicode Registry (CSUR) 和 Rebecca Bettencourt 的 Under-CSUR 补充。</h1>
    
    </html>

     

    在接下来的例子中,用到了用户本地字体"Helvetica Neue Bold"的备份;如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过),就会用下载的字体"MgOpenModernaBold.ttf"来代替:

    @font-face {
      font-family: MyHelvetica;
      src: local("Helvetica Neue Bold"),
      local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
      font-weight: bold;
    }
    

    Copy to Clipboard

    接下来的例子在英文原文中已被删除。

    这个例子新定义了一个字体,正常粗细的字采用字体Times New Roman,粗体字采用Consolas。

    @font-face {
        font-family: myFirstFont;
        src: local("Times New Roman");
        font-weight:normal;
    }
    
    @font-face {
        font-family: myFirstFont;
        src: local(Consolas);
        font-weight:bold;
    }
    

    Copy to Clipboard

    注意

    • 这里使用的Web fonts 仍然受到同域限制  (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
    • 因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME,因此不能为这些字体类型设置特定的MIME(实际上WOFF的MIME将会是application/font-woff,但浏览器对此MIME的识别还不统一,其它字体情况也类似,可暂时使用application/octet-stream)。 
    • 你不能在一个 CSS 选择器中定义 @font-face 。例如,这样写是无效的:
      .className {
        @font-face {
          font-family: MyHelvetica;
          src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
              url(MgOpenModernaBold.ttf);
          font-weight: bold;
        }
      }
      Copy to Clipboard

    规范

    SpecificationStatusComment
    WOFF File Format 2.0WOFF2 font formatRecommendationFont format specification with new compression algorithm
    WOFF File Format 1.0WOFF font formatRecommendationFont format specification
    CSS Fonts Module Level 3@font-faceRecommendationInitial definition

    浏览器兼容性

    Report problems with this compatibility data on GitHub

    desktopmobile
    ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet

    @font-face

    Full support1Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
    SVG fonts

    DeprecatedNon-standard

    No support1 – 38No supportNoNo supportNoNo supportNoNo support15 – 25Full support3.1No support37 – 38No support18 – 38No supportNoNo support14 – 25Full support3No support1.0 – 3.0

    WOFF

    Full support6Full support12Full support3.5Full support9Full support11.1Full support5.1Full support4.4Full support18Full support4Full support11.1Full support5Full support1.0

    WOFF 2

    Full support36Full support14Full support39No supportNoFull support23Full support10

    footnote

    Open
    Full support37Full support36Full support39Full support24Full support10Full support3.0
    ascent-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
    descent-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
    font-displayFull support72Full support79Full support58No supportNoFull support60Full support11.1Full support72Full support72Full support58Full support51Full support11.3Full support11.0
    font-familyFull support4Full support12Full support3.5Full support6Full support10Full support3.1Full support2.2Full support18Full support4Full support10.1Full support2Full support1.0

    font-feature-settings

    No supportNoNo supportNoFull support34

    footnote

    Open
    No supportNoNo supportNoNo supportNoNo supportNoNo supportNoFull support34

    footnote

    Open
    No supportNoNo supportNoNo supportNo
    font-stretchFull support62Full support17Full support62No supportNoFull support49Full support10.1Full support62Full support62Full support62Full support41Full support10.3Full support6.0
    font-styleFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
    font-variantFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
    font-variation-settingsFull support62Full support79Full support62No supportNoFull support49No supportNoFull support62Full support62Full support62Full support46No supportNoFull support8.0
    font-weightFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
    line-gap-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
    size-adjustFull support92Full support92Full support92OpenNo supportNoFull support78No supportNoFull support92Full support92Full support92No supportNoNo supportNoFull support16.0
    srcFull support4Full support12Full support3.5Full support6Full support10Full support3.1Full support2.2Full support18Full support4Full support10.1Full support2Full support1.0

    Support for format keywords

    No supportNoNo supportNoNo supportNoNo supportNoNo supportNoFull support4No supportNoNo supportNoNo supportNoNo supportNoFull support5No supportNo
    unicode-rangeFull support1Full support12Full support36Full support9Full support15Full support3.1Full support37Full support18Full support36Full support14Full support3Full support1.0

    Legend

    Full support

    Full support

    No support

    No support

    Non-standard. Check cross-browser support before using.

    Deprecated. Not for use in new websites.

    See implementation notes.

    User must explicitly enable this feature.

    Requires a vendor prefix or different name for use.

    参考

    展开全文
  • 本文转自W3CPLUS 的《CSS @font-face》 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许...

    本文转自W3CPLUS 的《CSS @font-face》

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。

    首先我们一起来看看@font-face的语法规则:

    @font-face {
          font-family: <YourWebFontName>;
          src: <source> [<format>][,<source> [<format>]]*;
          [font-weight: <weight>];
          [font-style: <style>];
        }
    

    取值说明

    1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”

    2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

    3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;

    4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

    兼容浏览器
    在这里插入图片描述

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

    为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

    @font-face {
    font-family: ‘YourWebFontName’;
    src: url(‘YourWebFontName.eot?’) format(‘eot’);/IE/
    src:url(‘YourWebFontName.woff’) format(‘woff’), url(‘YourWebFontName.ttf’) format(‘truetype’);/non-IE/
    }

    但为了让各多的浏览器支持,你也可以写成:

    @font-face {
    font-family: ‘YourWebFontName’;
    src: url(‘YourWebFontName.eot’); /* IE9 Compat Modes /
    src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’), /
    IE6-IE8 /
    url(‘YourWebFontName.woff’) format(‘woff’), /
    Modern Browsers /
    url(‘YourWebFontName.ttf’) format(‘truetype’), /
    Safari, Android, iOS /
    url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); /
    Legacy iOS */
    }

    说了这么多空洞的理论知识,大家一定有点心痒痒了,那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的,假如我们有一个这样的DOM标签,需要应用自定义字体:

    HTML Code:

    Neues Bauen Demo

    通过@font-face来定义自己的Web Font:

    【我的理解 重点是里面的字体路径不要写错,其余的在开发过程中可以直接复制】

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

    我在这里采用的是相对路径,当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去:

    h2.neuesDemo {
    font-family: ‘NeuesBauenDemo’
    }

    效果:
    在这里插入图片描述

    看到上面的效果,我想大家会感到@font-face很神奇,同时也想争着做做看,可是一动手才发现,特殊字体我要怎样才能得到,那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢?有些朋友可能就不知道如何运手了,那么我们就带着这些问题来一个全程完成的实例吧:

    一、获取特殊字体:

    我们拿下面这种single Malta字体来说吧:
    在这里插入图片描述

    要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?我平时都是到Google Web Fonts和Dafont.com寻找自己需要的字体,当然网上也还有别的下载字体的地方,这个Demo使用的是Dafont.com的Single Malta字体,这样就可以到这里下载Single Malta
    在这里插入图片描述

    Single Malta下载下来后,需要把它解压缩出来:
    在这里插入图片描述

    二、获取@font-face所需字体格式:

    特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具或者软件来实现,下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说,首跟我点这里进入到下面这个界面吧。
    在这里插入图片描述

    如果你进入页面没有看到上图,你可以直接点击导航:
    在这里插入图片描述

    如果你看到了上面的界面,那就好办了,我们来看如何应用这个工具生成@font-face需要的各种字体,先把我们刚才下载的字体上传上去:
    在这里插入图片描述

    上传后按下图所示操作:
    在这里插入图片描述

    现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了,接着只要对他进行解压缩,你就能看到文件列表如下所示:
    在这里插入图片描述

    大家可以看到,解压缩出来的文件格式,里面除了@font-face所需要的字体格式外,还带有一个DEMO文件,如果你不清楚的也可以参考下载下来的DEMO文件,我在这里不对DEMO说明问题,我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。

    例如在自己的本地创建了一个fontface项目:
    在这里插入图片描述

    为了让项目结构更清晰,我们在项目中单独创建一个fonts目录,用来放置解压缩出来@font-face所需的字体格式:
    在这里插入图片描述

    现在@font-face所需字体已经加载到本地项目,现在本地项目中的style.css中附上我们需要的@font-face样式.
    【在使用@font-face的过程中,这些代码不需要都一个一个自己敲,下面这个代码可以直接复制,主要是里面字体路径一定要找对】

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

    到这里为止,我们已经通过@font-face自定义好所需的SingleMalta字体,离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上:

    h2.singleMalta {
    font-family: ‘SingleMaltaRegular’
    }

    效果:
    在这里插入图片描述

    看到上面的效果,那大家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体,到这里基本上就完成了,我在这里需要提醒使用者:

    1、如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;

    2、致命的错误,你在@font-face中定义时,文件路径没有载对;

    3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;

    以上几点都是在平时制作中常出现的问题,希望大家能小意一些,另外我们没有办法在购买所有字体,就算你实力雄厚,那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest(本人在测试时这个链接已经不好用了),Google Web Fonts(这个也不好用了),Dafont,Niec Web Type。前面几个链接是帮助你获取一些优美的怪异的特殊字体,但下面这个工具作用更是无穷的大,他能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel
    我在加一款字体方拓字体

    最后在提醒一下,使用@font-face别的可以忘了,但Font Squirrel千万不能忘,因为他能帮你生成@font-face所需的各种字体格式。

    到此关于@font-face就介绍完了,不知道大家喜欢不喜欢,如果喜欢的话赶快动手实践一下,有Blog的可以马上运用上去,也可以炫一下。

    2014年03月更新——@font-face无法在Firefox下正常工作的解决方案,详细的请点击:http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

    展开全文
  • @font-face

    2021-11-04 16:23:42
    全局使用@font-face,让用户看到他操作系统中未安装过的字体。

    一、第一步

    项目下创建一个文件夹存放网上下载下来的 font 文件。

     注:网上通常下载到的都是 ttf 格式的文件,单一格式的文件,兼容性较差,建议寻找转换格式的网站来转成对应格式。如公司有UI部门建议找UI提供。

    二、第二步

    在刚才我们创建的文件夹下,创建一个 css 文件,着手写样式。

    @font-face {
        font-family: 'webfont'; /* 起个名字 */
        src: url('webfont.eot'); /* IE9 */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'),
        url('webfont.woff') format('woff'), /* chrome、firefox */
        url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }

    注:如只有 ttf 格式,只写一个 src: url('xxx.ttf'); 也是可以的,只是放到别的或特殊的浏览器上很可能失效。

    三、第三步

    在入口文件中引入这个 font.css 文件,我这里的入口文件是 main.js。

     四、第四步

    在页面中使用。

    div {
        span {
            font-family: '写你在font.css文件中起的名字';
        }
    }

    展开全文
  • font-face 如何使用?用法很简单, 在style中定义如下样式。@font-face{font-family: 'reoo';src: url('../font/HelveticaNeue.woff') format('woff'),url('../font/Helveticaneue.woff2') format('woff2'),url('../...

    font-face 如何使用?

    用法很简单, 在style中定义如下样式。

    @font-face

    {

    font-family: 'reoo';

    src: url('../font/HelveticaNeue.woff') format('woff'),

    url('../font/Helveticaneue.woff2') format('woff2'),

    url('../font/Helveticaneue-webfont.ttf') format('truetype');

    }

    在HTML中调用即可,如下:

    this is demo text!

    【特别注意:】不管你下载的是什么格式的字体,请将它转化成为-----》woff的字体。

    如何转化字体格式?请度娘

    字体转化格式网站:

    font-face 服务器上Not Found:

    font-face服务器上不显示Failed to load resource: the server responded with a status of 404 (Not Found)以及解决方案

    我的网站空间是用的服务器的虚拟主机,在只需要在主机控制器平台添加对应的MIME类型!

    0cf6c7176bbdce6c91b77229bb845bdf.png

    第一次使用FontAwesome加载字体,但是使用的时候却提示fonts/fontawesome-webfont.woff2 404 (Not Found),很明显这是由于文件不存在导致的问题。然后我们具体来看一下:

    可能存在两种情况:

    1、项目发布过程中这个文件没有被拷贝到发布目录,我这次碰到的问题就是这个原因导致的,在项目grunt build时会进行文件的copy操作,其中对文件后缀做了限制,所以我只需要加上这个.woff2即可;

    2、由于web服务器不支持导致的:

    nginx不支持的情况,可以参考下面的配置解决:

    38a366d672dd0431dae0d83c9909f080.gif

    location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {

    add_header Access-Control-Allow-Origin *;

    }

    AddType application/x-font-woff woff

    AddType application/x-font-woff2 woff2

    38a366d672dd0431dae0d83c9909f080.gif

    Apache默认是不支持.woff和.woff2的,所以要设置一下:

    38a366d672dd0431dae0d83c9909f080.gif

    location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {

    add_header Access-Control-Allow-Origin *;

    }

    AddType application/x-font-woff woff

    AddType application/x-font-woff2 woff2

    38a366d672dd0431dae0d83c9909f080.gif

    IIS默认也是不支持的,可以添加MIME类型来解决:

    .woff2 application/x-font-woff

    展开全文
  • 我有@ font-face标签设置(理论上)它们应该显示的方式 . 然而现实中发生的事情是,粗体总是斜体 . 反正有没有声明这些粗体斜体,以便它们能够正常工作?我不想在所有地方调用不同的字体系列名称 . 理想情况下,我...
  • 使用@font-face: 使用font-family: 1.安装: 第二种安装方式:打开控制面板,找到字体,把要的ttf文件拖进去就好 2. 把文件上的字体名称写进去就 运行效果(两种方式效果相同) ...
  • CSS3 @font-face属性

    2021-06-12 08:30:54
    font-face是css3中允许使用自定义字体的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。到了今天这个时代自定义字体会越来越常用,因为前端自动化可以压缩中文未使用到的字体,从而减小中文字体文件体积,...
  • @font-face规则在CSS3规范中属于字体模块,该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中,设计师不敢使用各种艺术字体类型,甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中...
  • 注意,您可能也有兴趣:其中包括一个更具描述性的细分的...@font-face {font-family: 'Bumble Bee';src: url('bumblebee-webfont.eot');src: local('☺'),url('bumblebee-webfont.woff') format('woff'),url('bumb...
  • CSS3 @font-face 用法

    2021-08-14 14:31:11
    @font-face { font-family: electronicFont; /* 定义字体的名字 */ src: url(../font/DS-DIGIT.TTF); /*定义该字体的路径*/ } .no .no-hd ul li { position: relative; flex: 1; line-height: 1rem; font-...
  • 使用@font-face加载多种字体不起作用 反思:是我搞错了,字体加载可能就是要一条一条的写 文件结构目录 代码如下 <!doctype html> <head> <meta charset="utf-8"> <style type="text/css"&...
  • @font-face用法超详细讲解 1.font-face是什么 font-face是css3中允许使用自定义字体的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。 2.font-face的基本用法 @font-face { font-family: <...
  • font-face 是CSS3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中 好处: 1.可以非常方便的改变大小和颜色 直接通过font-size、color等文字样式去修饰字体图标 2.放大后不会失真 3.减少请求次数和提高...
  • css @font-face属性指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */}css @font-face属性...
  • CSS3 @font-face 规则

    2021-08-05 04:15:18
    CSS3 @font-face规则实例指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL:@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */}尝试一下 »...
  • @font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一...
  • 2.第二步输入@font-face代码 css代码 1.font-family:‘icomoon’; 是你自定义的字体名称。 2、src:指的是你自定义的字体的存放路径; 3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别。 4、...
  • 我需要在html文件中包含一个字体...如果我这样使用@ font-face:@font-face {font-family: "OpenSymbol";src: url("/OpenSymbol.ttf") format("truetype");}它适用于Chrome,Opera和Safari,但不能在Firefox中都...
  • 前端设计采用@font-face规则进行字体的引入 详细步骤: 一、在CSS引入字体; 1、单个字体引入; 2、多个字体引入。 二、在JavaScript中使用: 1、使用className = { styles.a } ; 2、直接使用style = {{ fontFamily:...
  • 网页制作中,如果想使用特定的字体可以通过 @font-face引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。注意:支持 @font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和...
  • @font-face { font-family: "字体名称1","字体名称2",...; src: url("字体存放路径"); } 步骤二、使用该字体 .test { font-family: "字体名称1","字体名称2",...; } 例如我要引入一个Pixeboy字体,完整代码...
  • 通过Ajax以post请求向服务器提交数据,在PHP中输出$_POST超全局变量的值。输出结果如下图代码如下://demo3.htmlDocument用户名:密码:var...var xhr = new XMLHttpRequest();submit_btn.onclick = function(e){e.p...
  • @font-face使用自定义字体 1、第一步先将制作好的自定义字体图标放入项目文件夹中 2、从字体网站上下载字体,引入到css中 3、实现代码 4、图标显示 5、图标: 总结:以上就是自定义字体的方法。 ...
  • @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。语法规则首先我们一起来看看@font-face的语法规则:@font-face {font-family: ;src: [][, []]*;[font-weight: ];[font-style: ];}font...
  • css的@font-face怎么用?

    2021-06-17 01:48:33
    @font-face是CSS3中的一个模块,可以把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,在Web的开发中使用字体不在只能使用Web安全字体。@font-face 兼容性Firefox、Chrome、Safari 以及 Opera 支持 ...
  • 自定义@ font-face不加载chrome(chrome自定义字体无法渲染)使用CSS自定义字体@font-face {font-family:'gotham-rounded-medium';src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot');src:url('fonts/...
  • CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。你们当中或许有许多人会...
  • 编辑:嗯,看起来字体是在DOM上的一个元素使用后加载的,所以我只是使用了一个隐藏的Div和一个使用font-face字体的文本,它现在正在工作…… ????我正在使用此代码通过大量更新来更新favicon,但我想使用自定义像素字体...
  • resource-static路径下的css static下建立fonts文件夹 加入font.woff文件 src: url(…/fonts/font.woff) format(“woff”); 注意woff文件好像不能乱命名 之前叫icon.woff就无法成功加载…

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,763
精华内容 24,705
关键字:

font-face

友情链接: bai.rar.zip