在仿苹果官网"垃圾桶"时, 设计出的UI使用PingFang SC 字体,在网上查了很久,特记录.如果你有更好的方法,欢迎评论留言~ 实现原理,使用@font-face将字体下载在用户电脑中,然后font-family使用字体. 关于font-face链接 css: @font-face { font-family: 'myFont'; src: url('/assets/font/PingFangSC-Light.ttf'); //你的资源目录 font-weight: normal

一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性.同时,这类字体和矢量字体一样可以随意缩放.旋转而不必担心会出现锯齿. TrueType(.ttc) TTC是几个TTF合成的字库,安装后字体列表中会看到两个以上的字体.两个字体中大部分字都一样时,可以将两种字体做成一个TTC文件,现在常见的TTC中的不同字体,汉字一般没

Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在于客户的计算机上,则浏览器会使用默认字体. <style> .line { font-family: 'Courier New', Courier, monospace; } </style> <p>Hello World!</p> 如果没有设置 font-fa

回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足产品的需要,保证视觉稿的还原度,手机端是如何定义微软雅黑字体呢? 相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上,在需要使

一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足

回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足产品的需要,保证视觉稿的还原度,手机端是如何定义微软雅黑字体呢? 相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上,在需要使

1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示.什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码: font-family:"Comic Sans MS","幼圆","黑体",sans-seri

1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示.什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码: font-family:"Comic Sans MS","幼圆","黑体",sans-seri

问题:刚刚在IIS上部署web项目的时候,发现浏览器总是报找不到woff字体的错误.导致浏览器加载字体报404错误. 原因:因为服务器IIS不认WOFF这个文件类型,只要在IIS上添加MIME 类型即可. 解决方法 1.打开服务器IIS管理器,找到MIME类型. 2.添加MIME类型 添加一条: 文件扩展名      MIME类型 .woff            application/x-font-woff 注:IIS6.IIS7 MIME类型管理所处位置不一样,但是添加方式和参数均相同.

做网页时经常挑选不好颜色吧...多看看颜色值,或者自己配吧.... 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF). 十六进制值使用三个双位数来编写,并以 # 符号开头. 下面是一些颜色值...不多不多...够用了... 颜色名 十六进制颜色值 颜色 Black #000000 Navy #000080 DarkBlue #00008B MediumBlue #

字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字,可以改变颜色,产生阴影等:本身体积小:几乎支持所有浏览器.移动端设备必备. 项目中字体图标使用流程 1.UI人员设计字体图标效果图(svg) 2.前端人员上传生成兼容性字体文件包 3.前端人员下载兼容字体文件包到本地 4.把字体文件包引入到HTML页面中 生成字体文件包方法 上传文件到专门的网站,生

body{font-size:0.6rem:} <script> //使用rem策略,不断更新html的fontsize (function(){     function sizeHtml(){         window.mtSizeBase = $(window).width()/16;         window.mtSizeBase = window.mtSizeBase>45?45:window.mtSizeBase;         $("html"

阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博客(四) 前言 本站基于Hexo搭建,用的 hexo-theme-butterfly 主题 v3.7.1,请注意最新的 hexo-theme-butterfly 版本已经更新到 v4.2.2 . 如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意. 注意:我的博客根目录路径为 [G:/

  Hexo是轻量级的极客博客,因为它简便,轻巧,扩展性强,搭建部署方便深受广大人们的喜爱.各种琳琅满路的Hexo主题也是被各种大佬开发出来,十分钦佩,向大佬仰望,大声称赞:流批!!! 我在翻看各种主题后,便选择了蝴蝶这个主题,蝴蝶主题是由大佬Jerry制作的,其简洁,具有现代风格,扩展强,配置简单明了将我所吸引. 效果图: 蝴蝶主题github 于是我按照主题的文档完成主题配置,参照其他butterfly使用者,又添加了一点魔改.为了方便大家,减少配置上花的时间,我就把脚手架代码放到gitee

Windows自带字体: 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋GB2312:FangSongGB2312 楷体GB2312:KaiTiGB2312 微软雅黑:Microsoft YaHei (win7以上) 安装Office多出的字体: 隶书:LiSu 幼圆:YouYuan 华文细黑:STXihei 华文楷体:STKaiti 华文宋体:STSong 华文中宋:STZhongsong 华文仿宋:STFangsong 方正舒体

之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文. 正文从这里开始. 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下.看了一下一些比较出名的网站移动端的 font-family: 天猫:font-family: "PingFang SC",miui,system-ui

body { font-family: -apple-system, //针对 Web 页面 BlinkMacSystemFont, //针对 Mac Chrome 页面 SFProDisplay, //针对微信小程序 ... } 衬线字体与无衬线字体 衬线字体:serif 无衬线字体:sans-serif (衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同) web 字体 font-family 再探秘:https://www.cnblogs.com/coco1

前言 最近研究各大网站的font-family字体设置,发现每个网站的默认值都不相同,甚至一些大网站也犯了很明显的错误,说明字体还是有很大学问的,值的我们好好研究. 不同的操作系统.不同浏览器下内嵌的默认字体是不同的,错误的字体设置会导致页面在不同环境渲染的混乱,选择一套合适的字体是打造优秀网页的第一步.通过本文,我们会介绍字体的知识点,并探索在PC和Mobile两端该如何正确的设置字体. 字体基础知识 字体的分类 serif(衬线) sans-serif(无衬线) monospace(等宽)

1.背景 前端时间产品经理问我,移动端web默认字体有哪些,哪些字体不侵权?我当时感觉这方面的知识很匮乏,只能回答出微软雅黑和苹方简体,平常写代码时,没怎么留意过font-family设置的字体属性,今天有空,决定学习一下这个知识点. 2.字体族的分类 字体族主要分为6大类:分别是serif(衬线),sans-serif(无衬线字体),monospace(等宽),cuisive(草体),fantasy(梦幻),emoji(表情).web平常我们接触最多的就是衬线字体和无衬线字体.尤其是无衬线字体

参考: 移动web页面使用字体的思考.http://www.cnblogs.com/PeunZhang/p/3592096.html