font-family

好消息!iconfont+开始支持彩色图标

那年仲夏 提交于 2019-12-06 16:52:26
想必关注iconfont的同学都知道,iconfont最近做出了一次重大升级,升级成为iconfont+了,而这次更新,iconfont+居然开始支持彩色图标,这意味着我们能够使用更具有特色更形象的全新图标。之前我们也发表过一篇关于iconfont图标字体的相关教程,以文字的方式,实现网页中的图标和特殊字符。教程链接可参考: 点这里 接下来我们来详细了解一下全新的功能吧。 symbol引用: 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点: 支持多色图标了,不再受单色限制。 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般,还不如png。 这种全新的使用方式,据官网介绍说是做了一个svg的集合,SVG(Scalable Vector Graphics)可缩放矢量图形,SVG具有什么特点呢? SVG特点: 1.任意放缩。(用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。) 2.文本独立。(SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。) 3.较小文件。(总体来讲

CSS引入外部字体方法,附可用demo

回眸只為那壹抹淺笑 提交于 2019-12-06 12:15:34
有时候我们做的页面需要用到一些更好看的字体 又不想用图片代替,图片会影响加载速度 则使用外部字体来显示 但是直接通过font-family又不一定全部都行 这就需要我们在css中进行定义并且引入字体文件路径 然后再使用外部字体 直接上代码: font.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS引用外部字体</title> <link rel="stylesheet" type="text/css" href="font.css"> </head> <body> <h1>里客云资源站</h1> <h2>www.likeyunba.com</h2> </body> </html> font.css @font-face { font-family: 'fontnameRegular'; src: url('fontname.eot'); src: local('fontname Regular'), local('fontname'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg'); } /

CSS font-family 各字体一览表

孤人 提交于 2019-12-06 04:41:47
windows常见内置中文字体 字体中文名 字体英文名 宋体 SimSun(浏览器默认) 黑体 SimHei 微软雅黑 Microsoft Yahei 微软正黑体 Microsoft JhengHei 楷体 KaiTi 新宋体 NSimSun 仿宋 FangSong OS X常见内置中文字体 字体中文名 字体英文名 苹方 PingFang SC 华文黑体 STHeiti 华文楷体 STKaiti 华文宋体 STSong 华文仿宋 STFangsong 华文中宋 STZhongsong 华文琥珀 STHupo 华文新魏 STXinwei 华文隶书 STLiti 华文行楷 STXingkai 冬青黑体简 Hiragino Sans GB 兰亭黑-简 Lantinghei SC 翩翩体-简 Hanzipen SC 手札体-简 Hannotate SC 宋体-简 Songti SC 娃娃体-简 Wawati SC 魏碑-简 Weibei SC 行楷-简 Xingkai SC 雅痞-简 Yapi SC 圆体-简 Yuanti SC office安装后新增字体 字体中文名 字体英文名 幼圆 YouYuan 隶书 LiSu 华文细黑 STXihei 华文楷体 STKaiti 华文宋体 STSong 华文仿宋 STFangsong 华文中宋 STZhongsong 华文彩云 STCaiyun

Font family name from font file

梦想的初衷 提交于 2019-12-06 04:10:33
问题 I have a .ttf file ,i want to retrieve the font family name. 回答1: This is most easily done by importing the System.Windows.Media namespace, which gives you more to work with and a simpler API than getting the font out of a ByteArray using System.Windows.Media; String fontFilePath = "PATH TO YOUR FONT"; GlyphTypeface glyphTypeface = new GlyphTypeface(fontFileURI); String fontFamily = glyphTypeface.Win32FamilyNames[new System.Globalization.CultureInfo("en-us")]; String fontFace = glyphTypeface

css 苹方字体

夙愿已清 提交于 2019-12-05 23:11:07
苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 纤细体 font-family: PingFangSC-Thin, sans-serif; 苹方-简 中黑体 font-family: PingFangSC-Medium, sans-serif; 苹方-简 中粗体 font-family: PingFangSC-Semibold, sans-serif; 苹方-繁 font-family: PingFangTC-Regular, sans-serif; font-family: PingFangTC-Ultralight, sans-serif; font-family: PingFangTC-Light, sans-serif; font-family: PingFangTC-Thin, sans-serif; font-family: PingFangTC-Medium, sans-serif; font-family: PingFangTC-Semibold, sans-serif; 苹方-港

Js获取字符串的显示宽度/高度

拜拜、爱过 提交于 2019-12-05 22:25:36
重点: 1.在H5页面,文字大小单位为rem 2.不同的font-family,文字的宽度不一样 3.文字宽度同时受font-size和font-family影响 思路: 在页面动态创建一个节点,设置节点的font-size,font-family,还有内容,然后获取它的宽度。节点宽度必须随内容变化而变化,所以使用display:inline-block 为了避免禅城误差,使用 getComputedStyle 方法来计算宽度,具体原因看上一篇博客:http://blog.csdn.net/zy1281539626/article/details/78488062 废话不多说,直接上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <!-- 此span作为对比 --> <span id="test" style="display: inline-block;font

文字样式

徘徊边缘 提交于 2019-12-05 20:45:43
一、常用的文字样式 常用的文字样式有字体(font-family),字体大小(font-size),字体样式(font-style),字体的粗细(font-weight),字体大小写(font-variant),通常我们直接用复合样式。 二、常用文字样式实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字样式</title> <style> /* 1 font-family:字体,默认微软雅黑,可以同时设置多个字体,只有前面的字体没有,就用后面设置的字体*/ /* 2 font-size:字体大小(单位:px,rem, %, em) px:谷歌浏览器默认字体大小为16px,最小识别为12px; rem:相对于html根标签的n倍,如谷歌浏览器的默认字体的大小为16px,那么font-size用rem为单位,那么设定字体的大小为16*n em:父级字体大小*n,假如<div>hello<span>world</span>!</div>,假如div的大小已经设定,那么span可以通过em单位,来设定和父级标签成倍数的大小 % : 同em一样,为父级字体大小*n% */ /*3. font-weight:字体粗细,normal(默认粗细),light(变细), bold(加粗),bolder

CSS关于选择器和继承的一些小问题:

若如初见. 提交于 2019-12-05 04:57:35
选择器的分组 对选择器进行分组,这样在同一组的选择器就可以分享相同的声明。使用逗号将需要分组的选择器分开 h1,h2,h3,h4,h5{ color:green; font-family:"sans serif"; } 继承的一些问题 1、继承 根据css子元素继承父元素属性,但它并不总是这样: body{ font-family: Verdana,sans-serif; } 根据以上代码,站点的body元素将使用Verdana字体 CSS的子元素将继承最高元素所拥有的属性(上例子中为body元素),即所以body的子元素都应当显示Verdana字体,子元素的子元素也一样 访问W3C 在以前浏览器在“大乱斗”的时候,这种规则没有得到统一,所以在一些老浏览器中未必可以实现 2、如何摆脱继承 在某些特殊的情况下,比如你不希望某个子元素继承父元素的某些属性,那么该如何摆脱 “血继限界” 、 “刻在DNA里的” 父元素的属性呢? body{ font-family:Verdana,sans-serif; font-size:12px; color:red; } td,ul,ol,li,dt,dd{ font-samily:Verdana,sans-serif; font-size:20px; color:blue; } p{ /* 即为P单独开一个特殊的规则,就可摆脱 */ font

对DOM对象的三种操作

微笑、不失礼 提交于 2019-12-05 04:54:53
 var span = document.getElementById("today"); // 设置内容  span.innerText = "天空好像下雨"; span.innerHTML = "<font color='deepskyblue'>天空好像下雨</font>"; //设置属性  span.setAttribute("color","green"); //设置样式   span.setAttribute("style","font-family: 幼圆;"); 来源: https://www.cnblogs.com/tanghao22/p/11907917.html

css字体样式

我们两清 提交于 2019-12-04 22:02:20
css字体样式 font-size : 字体大小 font-size属性用于设置字号,该属性的值可以使用相对单位长度,也可以使用绝对单位长度。 相对长度单位 说明 em 相对当前对象内文本的字体尺寸 px 像素 最常用 推荐使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有的段落文本的字体变黑,可以使用css样式代码: p {font-family: "微软雅黑";} 1.现在网页中普遍使用14px+。 2.尽量使用偶数字号的字体.ie6等老数浏览器支持奇数号字体有bug 3.各种字体之间必须使用英文状态下的逗号隔开。 4.中文字体需要加英文状态下的符号,英文字体一般不需要加引号。当需要设置引英文字体时,英文字体名必须位于中英文字体名之间。 5.如果字体名中包含空格、#、$等符号时,则该字体必须加英文状态下的单引号或双引号,如`font-family:"times new roman"` 6.尽量使用系统默认字体,保证在任何用户浏览器中都能正确显示 unicode字体 浏览器 兼容性好,去编码表中查看对用字体 font-weight:粗细 bold:加粗 normal:正常 bolder:特粗体 lighter:细体 400