font-family

Web 字体 font-family 再探秘

我的梦境 提交于 2019-12-03 02:19:43
原文: Web 字体 font-family 再探秘 之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family 。 该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。 正文从这里开始。 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下。看了一下一些比较出名的网站移动端的 font-family : 天猫 : font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github : font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; CSS-Tricks : font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif

Safari and IE can't read TTF and EOT fonts

匿名 (未验证) 提交于 2019-12-03 02:16:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I have trouble reading a font in Safari. I converted OTF to TTF - two bold and regular fonts. Both are fine in Chrome and Firefox. But in Safari, only the bold font is works, regular does not. IE does not read the EOT font which I have converted from a website. Is there any better way to convert OTF to EOT? Here is my code: <style type = "text/css" > //Bariol_Bold @font - face { font - family : Bariol_Bold ; src : url ( "fonts/bariol_bold.eot" ); /*For ie browser*/ } @font - face { font - family : Bariol_Bold ; src : url ( "fonts

Outline effect to text

匿名 (未验证) 提交于 2019-12-03 01:58:03
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive - like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new. 回答1: There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far. What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I

How can custom underline to a text

匿名 (未验证) 提交于 2019-12-03 01:22:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: How to get border-bottom like in image. I've tried text-underline for a h1 tag using text-decoration property. h1 { color : #F16A70; text - transform : uppercase ; font - size : 30 ; font - family : oswald text - decoration : underline ; } h1 : after { width : 60 %; border - bottom : 2px solid #F16A70; } <div> <h1> navigation </h1> </div> 回答1: Here's one more solution: h1 { color : #F16A70; text - transform : uppercase ; display : inline - block ; font - size : 30 ; font - family : oswald ; text - decoration : none ; background -

Advanced CSS Selector - Select based on styling

匿名 (未验证) 提交于 2019-12-03 01:12:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Performance issues aside, is it possible to use a style as a selector? For example, something like: div[background-image="img/someimg.jpg"] {opacity:.5} My fallback plan is to use javascript and iterate over divs (adding a class when found), but this might end up being even more expensive given that the page is highly dynamic, and I'm not in control of the divs being added. 回答1: From the W3C page on Attributes : CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document.

iText7 adding SVG into PdfDocument and possible issues

匿名 (未验证) 提交于 2019-12-03 01:00:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Regarding the answer of the question: How to add an SVG to a PDF using iText7 Here is a link click here ! When I used the Sample java code , it came an error. ERROR: com.itextpdf.styledxmlparser.node.impl.jsoup.JsoupXmlParser - Could not map node type: class com.itextpdf.styledxmlparser.jsoup.nodes.XmlDeclaration What might be the reason that causes the error? How can avoid it? Dependencies: dependencies { compile 'com.itextpdf:kernel:7.1.2' compile 'com.itextpdf:io:7.1.2' compile 'com.itextpdf:layout:7.1.2' compile 'com.itextpdf:forms:7.1.2

text-align: justify; not working with wkhtmltopdf

匿名 (未验证) 提交于 2019-12-03 00:56:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Good day! I'm creates PDF docs from HTML using wkhtmltopdf library. I used svg font according to this issue wkhtmltopdf custom font letter spacing I used custom font, added it by @font-face. All works fine for me, except one thing: text-align: justify is not working for some reason. In html text is aligned as expected, but not in PDF. Is anyone know how to fix this issue? UPD : Added CSS and HTML example <style type="text/css"> @font-face{ font-family:'source_sans_prolight'; src: url('/font/sourcesanspro-light-webfont.svg') format('svg');

CSS Font-Family Support Dropped for &lt;SELECT&gt; in Firefox?

匿名 (未验证) 提交于 2019-12-03 00:54:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: The following CSS used to work in all browsers that I have tested. It even has an option selector to handle Firefox. select, option { font-family: "Lucida Console", Monaco, monospace; } The newest versions of Firefox no longer properly apply font family styles. Former versions of Firefox, and every other major browser I've tested, fully apply the font family settings both to the select and to the items in the dropdown - now, it only gets applied to the select box itself, but NOT the dropdown. Does Firefox still support font-family changes to

周报--Qt通过cvbs接口显示

≡放荡痞女 提交于 2019-12-03 00:31:18
昵称:cmj<span style="font-family:Times New Roman;"> </span>日期:<span style="font-family:Times New Roman;">2014</span>年<span style="font-family:Times New Roman;">10</span>月<span style="font-family:Times New Roman;">18</span>日—<span style="font-family:Times New Roman;">2014</span>年<span style="font-family:Times New Roman;">10</span>月<span style="font-family:Times New Roman;">24</span> 本周完成任务:解决Qt通过显示cvbs接口显示,编写需求中的界面,红外遥控可控制界面,根据界面需求留出功能调用接口; 关键技术点说明:Qt如何通过cvbs接口显示,以及Framebuffer的设置。 1、义视频输出设备属性结构体 VO_PUB_ATTR_S stPubAttr;其属性设置如下: stPubAttr.u32BgColor = 0x000000ff; //设备背景色 RGB表示 stPubAttr.enIntfType

pc端和移动端默认样式重置

匿名 (未验证) 提交于 2019-12-03 00:22:01
首先说一下,为何要用重置样式 除了省心之外,还有两个好处 1.方便设计师/程序员发挥 白纸的感觉确实好。各种margin,padding,border的为0。。。 2. 便于发现前端代码的遗漏 用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset,浏览器会提供“勉强可以”的默认样式,很多人可能就发现不了或者会想“可能就这么设计的吧”,开发者即使意识到因为遗漏导致和设计稿不一致,出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”――由于破窗效应,这可能会导致越来越多的“凑合着吧” pc端: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td