首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

高清ICON SVG解决方案(上) - 腾讯ISUX

在Windows下的Firefox 4中采用的就是GDI这个技术进行字体渲染的,但是到了Firefox 4+之后的版本开始使用了DirectWrite这个技术,官方解释是说DirectWrite支持硬件加速...SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。...按照这套模板做了图标后,FF下面三个图标都是完美的,没有出现虚边,并且Chrome也同样是完好的,这是我们希望看的的。也证实了上面的两个问题猜测是正确的。...---- AI模板下载链接: AI模板下载地址 ---- 相关文章: 《高清ICON SVG解决方案(下)》 《Inline SVG vs Icon Fonts》 《FireFox 6中的DirectWrite...文本渲染》 《Typekit更新:改善Windows平台上的字体渲染》 《Open Type/CFF格式相对True Type格式的优势》 《字体图标制作详解》 感谢你的阅读,本文由 腾讯ISUX 版权所有

3.3K40

前端成神之路-CSS文字文本样式

尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称,直接写中文是可以的。...方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。...1.4 font-style:字体风格 在html中如何将字体倾斜我们可以用标签来实现 字体倾斜除了用 i 和 em 标签, 可以使用CSS 来实现,但是CSS 是没有语义的 font-style...属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下: 属性 作用 normal 默认值,浏览器会显示标准的字体样式 font-style: normal; italic 浏览器会显示斜体的字体样式...记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal

7.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS字体字段样式

    尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称,直接写中文是可以的。...font-style:字体风格 在html中如何将字体倾斜我们可以用标签来实现 字体倾斜除了用 i 和 em 标签, 可以使用CSS 来实现,但是CSS 是没有语义的 font-style属性用于定义字体风格...,如设置斜体、倾斜或正常字体,其可用属性值如下: 属性 作用 normal 默认值,浏览器会显示标准的字体样式 font-style: normal; italic 浏览器会显示斜体的字体样式。...记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用...line-height: 24px; text-indent:首行缩进 作用: text-indent属性用于设置首行文本的缩进, 属性值 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比

    13.7K20

    WPF 简单聊聊如何使用 DrawGlyphRun 绘制文本

    字体 字号 文本内容 文本绘制画刷 文本绘制的坐标 尽管 GlyphRun 对象需要的参数很多,然而很多参数都是可以默认获取的 字体 在 GlyphRun 里面需要的字体不是 FontFamily 而是需要传入的是...对于非等宽字符,可以在特殊排版需求的时候,强行设置为等宽的值 字符都是等比的,因此只需要设置宽度即可,设置字宽等于设置字号 设置字体偏移 在 GlyphRun 的高级用法里面,是允许设置文字的偏移量。...GlyphRun 的构造里面要求传入 DPI 的值用于清晰化显示,在旧版本的,如 .NET Framework 4.5 版本是不需要的 官方推荐的获取 DPI 的方法是根据当前文本将要渲染出来的控件获取控件的...如字体比较小的时候,将会删减一些笔画等 获取文本的渲染尺寸 可以通过如下代码获取文本的渲染尺寸,也可以通过如下方法获取单个字符的渲染尺寸 var computeInkBoundingBox = glyphRun.ComputeInkBoundingBox...,不过可以通过以上代码添加自己期望的字体回滚列表,如自己在应用程序里面带了特殊的字体,期望在找不到字体的时候使用自己的字体,就可以使用上面提供的回滚策略代码,使用方法如下 if

    1.7K10

    C# 从零开始写 SharpDx 应用 绘制基础图形

    的默认线条宽度,通过下面代码可以设置默认线条宽度 _d2dRenderTarget.StrokeWidth = 10; 圆角矩形可以使用 DrawRoundedRectangle...Geometry 可选的很多,最支持定制的是 PathGeometry 方法 如使用很多代码画出线条 var geometry = new PathGeometry(_d2dFactory...需要先创建才能使用,注意工厂需要只创建一次 var factory = new SharpDX.DirectWrite.Factory(); 创建工厂可以用来实例文本格式 var...在这个方法传入需要绘制的字符串和文本格式,和绘制的范围和颜色 var brush = new SolidColorBrush(_d2dRenderTarget, ColorToRaw4...,而不是每次进入绘制方法的时候都创建,这个代码将会内存泄露 在画文本需要用到很多参数,用于自己定制,请小伙伴自己玩一下 有了基础的画界面就可以做出好看的界面,如何根据这些简单的方法画出好看的界面请看 WPF

    2.4K10

    CSS 基础 之 基础选择器+字体文本相关样式

    类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小 4.2 字体粗细 4.3 字体样式(是否倾斜) 4.4 字体系列 5、文本样式 5.1 文本缩进 5.2 文本水平对齐方式...1.3 CSS 初体验 我们先来认识一下CSS 常见的属性: CSS 常见属性 作用 color 文字颜色 font-size 字体大小 background-color 背景颜色 width 宽度 height...4.3 字体样式(是否倾斜) 属性名 font-style 取值 正常(默认值):normal;倾斜:italic; 正常(默认值):normal; 倾斜:italic; 4.4 字体系列 属性名...网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示 具体字体:微软雅黑、黑体、宋体、楷体等…… sans-serif、serif、monospace等…… 渲染规则: 1....网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示 5、文本样式 文本缩进 text-indent 文本水平对齐方式 text-align 文本修饰 text-decoration

    2.1K10

    Web正文字体发展简史

    320像素时(使用默认浏览器设置)的字体大小为 16px。分辨率为 1600px 时,您将获得 40px 的文字。...并假设对于这种人,在这种设置中,他们有自己的偏好和当前的疲劳程度等,因此存在一个理想的字体大小,可以阅读他们正在阅读的任何文本。例如,它可以是 22px。 阅读过程涉及扫视和注视。...在每个注视中(可能跨越四分之一秒),他们只会看到一小部分焦点文本: 现在,如果相同的文本更大,但是其他参数(如眼屏距离)没有变化,我猜结果将如下所示: 由于聚焦区域保持不变,并且文字较大,我怀疑眼睛在每次注视上正确识别的字母会更少...这就是为什么我的假设是,对于真正的大文本(如 Resilient Web Design 250%在更大屏幕上的正文),读者将需要使用更多的注视力来阅读同一文本,并且可能会失去阅读速度并更快地感到疲劳。...根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。

    1.2K10

    wxss学习《四》字体,组件及API的思维导图

    一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, oblique 倾斜的字体。...2.font-weight:设置文本字体的粗细。取值范围为100-900. 取值:mormal:正常大小相当于400。bold :粗体,相当于700。bolder, lighter。...3.font-size:设置字体尺寸大小。 4.font-variant:设置对象中的文本是否为小型的大写字母。 取值:mormal 正常的字体。small-caps 小型的大写字母字体。...5.font-family:设置字体名称。 6.font-stretch:设置对象中的文字是否横向拉伸变形。 取值:normal:正常文字宽度。...如果 14px 的 Verdana(aspect 值是 0.58)不可用,但是某个可用的字体的 aspect 值是 0.46,那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px

    952100

    突破限制,CSS font-variation 可变字体的魅力

    标准(静态)字体就是只代表字体的某一特定的宽度/字重/样式的组合的字体文件,通常我们在页面引入的字体文件都是这种,只代表这个字体的某一特定的宽度/字重/样式的组合。...: oblique + angle,控制字体的倾斜 斜体轴 "ital":对应字体的 font-style: italic,控制字体的倾斜(注意,和 font-style: oblique 是不一样的倾斜...目前注册的五个轴是字重,宽度,倾斜度,斜体和光学尺寸。 上文其实已经罗列了 5 个注册轴,并且简单介绍了它们的使用。...是不一样的倾斜) 光学尺寸轴 "opsz":对应字体的 font-optical-sizing,控制字体的光学尺寸 自定义轴实际上是无限的:字体设计师可以定义和界定他们喜欢的任何轴,并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它...等级轴 'GRAD':“等级”一词指的是字体设计的相对重量或密度,但与传统的“重量”不同之处在于文本占据的物理空间不会改变,因此改变文本等级并不会改变文本或其周围元素的整体布局。

    1.2K10

    「Adobe国际认证」不要让“字距调整”,限制你的风格

    Em是印刷材料宽度的度量单位。它等于用于特定项目的字体中字母 M 的宽度。 字距调整类型 大多数图形设计软件工具提供两种主要类型的默认字距调整:度量字距调整和光学字距调整。...度量字距调整是由图形设计程序完成的自动字距调整,该程序内置在字距调整表中的字体本身中。字距调整表为经常出现问题的字距调整对分配标准值,例如“WA”或“Ta”。 字体中还内置了光学字距调整。...通常不需要对大块文本执行此操作,但应特别注意标题、带有文本的横幅图像和标题。...这将有助于将这个看似无止境的任务分解成更容易消化的食物。 翻转以获得新视角 人们常说,确保正确调整字距的最佳方法之一是将单词颠倒过来。这怎么可能有帮助?...Kerntype是一种交互式在线字距调整游戏,玩家可以通过拖动字母来达到适当的间距来尝试获得美观的文本。您确定的解决方案将与真正的印刷商解决方案进行比较,并根据您与他们的接近程度给出分数。尽力而为。

    46520

    如何用 canvas 渲染 Web Excel 富文本

    这篇文章就来讲解如何在 canvas 中渲染和排版富文本。在介绍之前可以先点击下面链接,体验下最终的效果。...在 canvas 中如果想让文本自动换行,需要手动测量每一个字符的大小,如果累计的字符的宽度超过容器的宽度,则换一行继续渲染。...: Rich[] // 当前文本的富文本样式} 富文本的自动换行会比上面介绍的自动换行还要复杂一点,因为一行文字中可能存在某个字符字体大小非常大,把其他字符挤下去,而且它还会影响行高,每行的行高也可能是不一致的...flush 是创建 TextLine 如果当前文本长度超了的话,另外它还会修改 TextToken 的高度,比如先解析字体比较小的 TextToken,如果后面又遇到这一行中字号更大的 TextToken...另外还需保存最新一行已解析的宽度,就是上面代码中的 x。因为接下来解析新的文本是需要从 x 宽度之后来计算的。 渲染 有了上面计算好的信息,要将文本渲染出来就非常简单直接,代码如下所示。

    1.3K20

    『知识巩固#1』Html、Css基础整理

    根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线 媒体标签 图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title...css写入style标签中,通常约定为html文件中的head标签内 外联式 写入单独的.css文件中 通过link引入link中 行内式 css 写在标签的style属性中 基础选择器...、padding属性 字体和文本样式 字体 字体大小 font-size 浏览器有默认值 16px 字体粗细 font-weight 取值 关键字: 正常normal 加粗 blod 纯数字:...正常400 加粗 800 字体样式 font-style 字体是否倾斜 正常 normal 倾斜 italic 字体系列 font-family 雅黑、宋体、黑体之类的 windows电脑 默认是微软雅黑...有笔锋 等宽字体 monospace 所有文字占相同宽度 样式的层叠问题 层叠性: 后面的覆盖前面的属性 样式以最后覆盖的为准 font 相关属性的连写 font: style weight size

    4K20

    HTML5简明教程(三)使用CSS3

    Web字体@font-face CSS3支持自定义字体,只需要在项目中导入字体文件或者文件链接url(常用的有.woff,.svg,eot等格式),样式文件中用@font-face定义字体名,字体文件路径等等...多栏文本 支持多栏文本有的CSS3属性有: column-count设置栏数 column-width设置每栏的宽度 3....媒体查询media 媒体查询media可以取得设备关键信息,如大小,分辨率等等,根据这些信息应用不同样式。 (1)定义样式表外部链接时使用 文本颜色和边框颜色都变透明。如果只想设置其中一种类型的透明度,可以使用函数ragb(val1, val2, val3, opacity)。 5....倾斜旋转:skew(x-angle,y-angle) 沿X 轴倾斜旋转:skewX(angle) 沿Y 轴倾斜旋转:skewY(angle) 10.

    1.6K10

    【CSS】文本样式:font & text

    文本颜色由 "color" 属性设置。 font 在一个声明中设置所有字体属性。...浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。...设置合理的行间距。 number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 length(如:28px) 设置固定的行间距。 % (如:80%) 基于当前字体尺寸的百分比行间距。...inherit 规定应该从父元素继承 text-transform 属性的值。 text-indent 规定文本块中首行文本缩进的距离。...% (如:20%) 定义基于父元素宽度的百分比的缩进。 inherit 规定应该从父元素继承 text-indent 属性的值。

    1.1K20
    领券