默认样式及字体图标准备

本节目标：理解“默认样式及字体图标准备”的核心思路，并能把它用于实际开发或面试表达。 ==本项目的样式采用== styled-components ==来进行开发，也就是利用== css in js ==的方式，我为什么要这么做，有兴趣的同学可以阅读一下我之前在掘金写的文章==

styled-components:

==前端组件拆分新思路====。当然后面有人看了我的项目后给我提了这个库的一些缺点，但我依然坚持用它进行开发，因为它在工程化方面的优势依然非常明显，而且大部分缺点我们也可以有意识的去避开，这个具体在后面的章节里面再说吧。== ==其实== styled-components ==的使用是相当简单的，不需要额外专门的学习，所以大家跟着我写一遍，熟悉一下就行了。== ==不知道你有没有发现一个问题，上面目录中默认样式文件是== style.js==，而不是==.css==，没错，这就是使用了== styled-components ==后的结果。== ==我们先安装这个库==

:
npm install styled-components --save

==在刚刚的== style.js ==中，==

import { createGlobalStyle } from'styled-components';
export const GlobalStyle = createGlobalStyle`	html, body, div, span, applet, object, iframe,	h1, h2, h3, h4, h5, h6, p, blockquote, pre,	a, abbr, acronym, address, big, cite, code,	del, dfn, em, img, ins, kbd, q, s, samp,	small, strike, strong, sub, sup, tt, var,	b, u, i, center,	dl, dt, dd, ol, ul, li,	fieldset, form, label, legend,	table, caption, tbody, tfoot, thead, tr, th, td,	article, aside, canvas, details, embed, 	figure, figcaption, footer, header, hgroup, 	menu, nav, output, ruby, section, summary,	time, mark, audio, video {		margin: 0;		padding: 0;		border: 0;		font-size: 100%;		font: inherit;		vertical-align: baseline;	}	/* HTML5 display-role reset for older browsers */	article, aside, details, figcaption, figure, 	footer, header, hgroup, menu, nav, section {		display: block;	}	body {		line-height: 1;	}	html, body {		background: #f2f3f4;;	}	ol, ul {		list-style: none;	}	blockquote, q {		quotes: none;	}	blockquote:before, blockquote:after,	q:before, q:after {		content: '';		content: none;	}	table {		border-collapse: collapse;		border-spacing: 0;	}	a {		text-decoration: none;		color: #fff;	}`

==这就是== styled-components ==创建全局样式并导出的代码。== ==这段代码导出到哪里去呢？导入到== App.js ==中。== //App.js ==中添加这一句==

import { GlobalStyle } from  './style';

==我们继续来引入字体图标文件，这里的字体图标是采用的阿里图标库== ==地址== ==选择好图标之后下载至本地== (==本项目下载== unicode ==模式==)==。这个操作不属于本项目的重点，也过于简单，就不在这浪费篇幅了。== ==在== assets ==目录下新建一个名为== iconfont ==的文件夹，将==.css, .eot, .svg, .ttf, .woff ==为后缀的文件放到这个文件夹中。== ==然后将这个== css ==文件做一些手脚，需要改成== js ==代码。== ==所以现在的== iconfont.css ==需要改成== iconfont.js==，这里做了一些省略，具体代码大家直接看== GitHub ==仓库== chapter1 ==分支吧。==

import {createGlobalStyle} from'styled-components';
export const IconStyle = createGlobalStyle`@font-face {font-family: "iconfont";  src: url ('iconfont.eot?t=1565320061289'); /* IE9 */  src: url ('iconfont.eot?t=1565320061289#iefix' ...

==省略== base64 ==巨长字符==

) format ('embedded-opentype'), /* IE6-IE8 */  url ('data:application/x-font-woff2;charset=utf-8) format ('woff2'),  url ('iconfont.woff?t=1565320061289') format ('woff'),  url ('iconfont.ttf?t=1565320061289') format ('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */  url ('iconfont.svg?t=1565320061289#iconfont') format ('svg'); /* iOS 4.1- */}
.iconfont {  font-family: "iconfont" !important;  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}...`

==接下来，咱们把字体引入== App.js ==中。==

//App.jsimport React from 'react';import { IconStyle } from './assets/iconfont/iconfont';import { GlobalStyle } from './style';
function App () {  return (    <div className="App">      <GlobalStyle></GlobalStyle>      <IconStyle></IconStyle>      <i className="iconfont">&#xe62b;</i>    </div>  );}
export default App;

==接下来大家打开页面可以看到一个小小的放大镜，背景变为浅灰色，字体图标和默认样式起到了效果。== ==到此为止，默认样式和字体图标就算一同引入到了项目中。大家可能会字体图标的用法有了了解，但是中间的== unicode ==编码怎么来的呢？别担心，我专门在== iconfont ==文件夹中放了== demo_index.html ==文件，打开便能索引不同图标的== unicode ==值啦。== > 来自

 <https://juejin.im/book/5da96626e51d4524ba0fd237/section/5da970cbe51d4524df35b644>

默认样式及字体图标准备 ​

默认样式及字体图标准备