CSS应用苹果的San Francisco字体

优先选择苹果字体,并兼容其它平台的字体。

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;
  • -apple-system:这是苹果系统的字体,在Safari上字体为San Francisco,在旧版的的Mac上为Neue Helvetica 和Lucida Grande字体。
  • system-ui:系统的默认字体。
  • BlinkMacSystemFont:这是用于Mac的Chrome,等同与-apple-system。
  • "Segoe UI":Windows (Vista+) 以及 Windows Phone的字体。
  • Roboto:Android 4.0+ 以及 Chrome OS字体
  • Ubuntu:Ubuntu系统的字体

参考:https://css-tricks.com/snippets/css/system-font-stack/ 以及https://github.com/necolas/normalize.css/issues/665

版权声明:著作权归作者所有。

相关推荐

CSS让绝对定位的元素居中的办法

水平居中,设置left:0,right:0, 垂直居中,设置top:0,bottom:0。margin设置为auto<!DOCTYPE html> <html lang="en"> <head> <title>SO question 2803532</title> <style type="text/css

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

Python:defaultdict应用示例

class collections.defaultdict([default_factory[, ...]]) defaultdict继承与内置类dict,但对于不存在的键处理方式不同。dict处理缺失的键在Python访问dict不存在的键会抛出KeyError异常。如计数列表里的颜色colors = ('yellow', 'red', 'yellow',

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主