极客教程React.js蓝图变量 字体变量
在本文中，我们将学习blueprint.js库提供的 字体变量 。BlueprintJS是一个基于React的用于Web的UI工具包。它使用TypeScript编写。这个库非常优化，非常流行，用于构建在现代Web浏览器中运行的复杂和数据密集型的桌面应用程序的界面。
字体变量： 这些变量用于自定义不同字体的样式。开发人员可以在Sass或less变量文件中使用它们。
字体变量：
- $pt-font-family： 对应CSS中的以下值
$pt-font-family: -apple-system, “BlinkMacSystemFont”, “Segoe UI”, “Roboto”,
“Oxygen”, “Ubuntu”, “Cantarell”, “Open Sans”, “Helvetica Neue”,
“blueprint-icons-16”, sans-serif
- $pt-font-family-monospace： 对应CSS中的以下值
$pt-font-family-monospace: monospace
- $pt-font-size: 它对应于CSS中的以下值
$pt-font-size: 14px
- $pt-font-size-small： 它对应于CSS中的以下值
$pt-font-size-small: 12px
- $pt-font-size-large: 对应于CSS中的以下值
$pt-font-size-large: 16px
- $pt-line-height： 它对应 CSS 中的以下值
$pt-line-height: 1.28581
创建React应用程序并安装模块
步骤1： 使用以下命令创建一个React应用程序：
npx create-react-app foldername
步骤2： 在创建你的项目文件夹，即文件夹名称后，使用以下命令移动到该文件夹中：
cd foldername
步骤3: 创建ReactJS应用程序后，使用以下命令安装所需模块：
npm install @blueprintjs/core
npm install @blueprint/datetime @blueprintjs/datetime2
npm install sass
项目结构： 看起来会像下面这样。
示例1： 以下示例演示了BlueprintJS中使用的不同字体变量。现在在App.js文件中写下以下代码。在这里，App是我们的默认组件，我们在这里编写了我们的代码。
文件名：App.js
import './App.scss'
import "@blueprintjs/core/lib/css/blueprint.css";
export default function App() {
return (
<div>
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React blueprint Font Variables:</strong>
<br />
<br />
</div>
<div className="container">
<p className='p1'>text</p>
<p className='p2'>text</p>
<p className='p3'>text</p>
<p className='p4'>text</p>
<p className='p5'>text</p>
<p className='p6'>text</p>
</div>
</div>
);
}
创建一个新文件，名为App.scss，并为不同的段落分配不同的字体变量。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
position: relative;
margin-left: 300px;
}
.p1 {
font-family: pt-font-family;
}
.p2 {
font-family:pt-font-family-monospace;
}
.p3 {
font-size: pt-font-size;
}
.p4 {
font-size:pt-font-size-small;
}
.p5 {
font-size: pt-font-size-large;
}
.p6 {
line-height:pt-line-height;
}
运行应用程序的步骤： 从项目的根目录使用以下命令运行应用程序：
npm start
输出： 现在打开浏览器并访问 http://localhost:3000/，你将看到以下输出：
示例2： 下面的示例演示了BlueprintJS使用的不同字体变量的用法，但由于使用了CSS中的 calc 实用函数而进行了轻微修改。
文件名：App.js
import './App.scss'
import "@blueprintjs/core/lib/css/blueprint.css";
export default function App() {
return (
<div>
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React blueprint Font Variables:</strong>
<br />
<br />
</div>
<div className="container">
<p className='p1'>text</p>
<p className='p2'>text</p>
<p className='p3'>text</p>
<p className='p4'>text</p>
<p className='p5'>text</p>
<p className='p6'>text</p>
</div>
</div>
);
}
创建一个名为App.scss的新文件，并为不同的段落分配不同的字体变量。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
position: relative;
margin-left: 300px;
}
.p1 {
font-family: pt-font-family;
}
.p2 {
font-family:pt-font-family-monospace;
}
.p3 {
font-size: calc(2 * pt-font-size);
}
.p4 {
font-size: calc(2 *pt-font-size-small);
}
.p5 {
font-size: calc(2 * pt-font-size-large);
}
.p6 {
line-height: calc(2 *pt-line-height);
}
运行应用的步骤 : 从项目的根目录中使用以下命令来运行应用:
npm start
输出：
参考： https://blueprintjs.com/docs/#core/variables.font-variables