zoukankan      html  css  js  c++  java
  • CSS添加本地字体

    项目中用到了集成商的硬件,安卓系统,通过套壳浏览器来展示一个页面。
    其中一个需求是一段标题文字用宋体展示,很普通,对吧。

    在本地用chrome调试时毫无问题,但是这个设备展示时,一直是黑体。
    于是尝试直接用设备自带的浏览器打开,果不其然,还是展示黑体。

    我们的手机肯定是有宋体的,怀疑是这个硬件精简掉了宋体(或者原生安卓本来就不带宋体?)。
    于是想到了通过css的font-face来加载本地字体。

    下载了simsun.ttf,提供下面这段代码,测试发现无效:

    @font-face {
    	font-family: 'SimSun';
    	src: url('simsun.ttf')  format('truetype'), /* Safari, Android, iOS */
      }
    

    查看浏览器的network栏,发现也没有字体下载的动作。。。

    几乎要放弃的时候,找到了这篇文章(引入font-face不管用

    其实之前也搜到一些内容,说是IE要使用eot格式字体才行,但是找了很久,就连宋体这种字体,都搜到了ttf格式,而没有搜到eot格式。
    这篇文章首先给出了生效的css,然后还给出了https://www.fontke.com/tool/fontface/这个网站,能帮忙将ttf转化成各种我需要的字体。
    通过这个网站,生成了这几种字体:ttf,eot,woff,woff2,svg

    最终生效的css如下:

    @charset "UTF-8";
    
    @font-face {
      font-family: "simsun-my";
      src: url("simsun.eot"); /* IE9 */
      src: url("simsun.woff2") format("woff2"),
           url("simsun.woff") format("woff"),
           url("simsun.ttf") format("truetype"),
           url("simsun.eot") format("embedded-opentype"),
           url("simsun.svg") format("svg");
      font-weight: normal;
      font-style: normal;
    }
    

    其实无法得知最终在硬件上其效果的是哪一句,但是最终效果生效,而以上写法应该也是确保兼容性的一种写法。

  • 相关阅读:
    2011 年50+优秀的网页设计(下)
    25+令人惊讶的是令人难以置信的WordPress技术支持网站
    2011 漂亮的网站(上)
    2011 美丽的网站(下)
    38 jQuery和CSS多级下拉菜单解决方案(一)
    HTMl代码片段
    30 +漂亮的jQuery菜单导航(一)
    分享几套还算不错的后台模板(有源码下载)
    配 色 方 案
    一个小故事
  • 原文地址:https://www.cnblogs.com/mosakashaka/p/12608949.html
Copyright © 2011-2022 走看看