美文网首页
浏览器页面字体

浏览器页面字体

作者: LucasLight | 来源:发表于2019-01-24 11:43 被阅读0次

大多数时间,我们希望网页字体是受到我们控制的页面字体,但是问题在于,我们的网页上的字体往往并不是所有的用户电脑上都有安装对应的字体。

例如最近几年常见的 苹方黑体 ,很多电脑是没有安装对应的字体的。

字体类型

  • Sans-serif 无衬线字体
    无衬线字体意味着字体在边角不会有很多装饰性的边边角角的装饰
  • Serif 衬线字体
    衬线字体则意味着字体在笔画开始和结束的时候会有一些装饰


    字体对比.jpg
  • Monospaced 等宽字体
    等宽字体意味着每一个字符宽度都一致,最著名的就是 courier new,因为字体宽度一致,所以特别容易对齐,比较适合编码用。
  • Fantasy字体
    梦幻字体,我在这翻译为艺术字,往往不切实际,用的不多,艺术作品可能用的比较多。
  • Script 字体
    手写体,大部分为欧美地区用到,
字体列表

网络安全字体

几乎在所有常用的操作系统上都有安装的字体,(windows、Mac、linux、Android、iOS等等)

网络安全字体要感谢来自于微软90年代和21世纪初的倡议 core fonts for the web

字体名称 字体类型 注意
Arial sans-serif 通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品,尽管它们的字体面几乎相同,但 Helvetica 被认为具有更好的形状,即使Arial更广泛地可用。
Courier New monospace 某些操作系统有一个 Courier New 字体的替代(可能较旧的)版本叫Courier。使用Courier New作为Courier的首选替代方案,被认为是最佳做法。
Georgia serif
Times New Roman serif 某些操作系统有一个 Times New Roman 字体的替代(可能较旧的)版本叫 Times。使用Times作为Times New Roman的首选替代方案,被认为是最佳做法。
Trebuchet MS sans-serif 您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdana sans-serif

注意,cssfontstack.com 维护了一个windows mac操作系统中使用的网页安全字体的列表,可以有助于你对于字体的决策。

字体栈

你可以看到即使是最常用的网络安全字体,也不能够保证100%的系统都能够识别,我们往往可以使用字体栈来代替。
字体栈其实就是你在font-family里面提供一个逗号分离的字体

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

这样子,会在首个字体不存在的情况下,以此读取后面的字体,倒是一个蛮不错的办法,

注意!

上述的字体在依次顺序是变化为非衬线字体了,这对于显示效果并不好,所以如果要使用字体栈,就一定要保证显示效果是相似的。而不是在字体栈里面列出来显示效果相差甚远的几套字体。

web字体

上述的字体栈只是简单的找到了替换的方式,但是如果出现了很多电脑都没有的字体,我们也可以通过浏览器来下载我们所需要的字体。

@font-face {
        font-family:"myFont";
        src:url('./css/myFont.ttf')
}

随后你就可以把你@font-face 中声明的字体引入到你想要的地方。

注意!

  • 浏览器支持不同的字体格式,因此您需要多种字体格式以获得良好的跨浏览器支持。
    例如,
    • 大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2,Web开放字体格式版本1和2),它是最有效的格式,
    • 但是旧版本IE只支持EOT (Embedded Open Type,嵌入式开放类型)的字体,
    • 你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
  • 字体一般都不能自由使用 ,您必须为他们付费,或者遵循其他许可条件,比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

寻找你需要的字体

通常有以下几种方式来寻找字体

  • 免费的字体经销商:这是一个可以下载免费字体的网站(可能还有一些许可条件,比如对字体创建者的信赖)。比如: Font SquirredafontEverything Fonts
  • 收费的字体经销商:这是一个收费则字体可用的网站,例如fonts.commyfonts.com。您也可以直接从字体铸造厂中购买字体,例如LinotypeMonotypeExljbris
  • 在线字体服务:这是一个存储和为你提供字体的网站,它使整个过程更容易。更多细节见Using an online font service

当然你也可以寻找万能的 github.com

相关文章

  • 浏览器页面字体

    大多数时间,我们希望网页字体是受到我们控制的页面字体,但是问题在于,我们的网页上的字体往往并不是所有的用户电脑上都...

  • 解决网站引入web字体加载延迟的奇技淫巧

    主要思路: 先用浏览器自带Microsoft YaHei占位,缓解网站字体不显示的尴尬;页面加载完时,用引入字体的...

  • Font

    font-family(字体原理) 使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到文字时会...

  • 更好的rem方案(兼容浏览器设置字体大小)

    问题:浏览器中调整字体大小,会影响使用了rem的页面的布局

  • 字体适配

    原理:浏览器可以设置字体号大小而改成webview的根字体大小,因为采用rem单位,使得页面呈现比例放大,造成布局...

  • 处理SPRINGBOOT OTS PARSING ERROR:

    springboot项目中添加了字体等文件后,页面无法识别,浏览器调试窗口报错如下: Failed to deco...

  • OTS parsing error: incorrect fil

    springboot项目中添加了字体等文件后,页面无法识别,浏览器调试窗口报错如下: OTS parsing er...

  • css3字体缩放样式-webkit-text-size-adju

    写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px,如果你要设置某字体大小为10px的话,你会在C...

  • 禁止微信内置浏览器调整字体大小

    问题:在微信浏览器中调整页面的字体大小时,会打乱页面的整个布局 解决: 1.ios:ios的解决方案是覆盖掉微信的...

  • HTML5与之前版本区别4

    其他元素 1.mark:标记页面中需要突出显示的文字 可以通过css改变背景和字体颜色 2.wbr:根据浏览器窗口...

网友评论

      本文标题:浏览器页面字体

      本文链接:https://www.haomeiwen.com/subject/hskyjqtx.html