Question

项目的基本结构如下：

其中fixed.html是主要的html文件，scss-variables.json是json文件，我们用json格式定义scss变量，角度代码将其转换为sass。

现在我想在这个主题中添加gibson字体，我尝试通过在app \ lib \ angular \ docs \ components下添加字体文件然后在其中使用它来添加它 app \ lib \ angular \ docs \ css \ docs.css如下：

@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_0_0.eot');
  src: url('../components/gibson/313E30_0_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_0_0.woff') format('woff'), url('../components/gibson/313E30_0_0.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_1_0.eot');
  src: url('../components/gibson/313E30_1_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_1_0.woff') format('woff'), url('../components/gibson/313E30_1_0.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_2_0.eot');
  src: url('../components/gibson/313E30_2_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_2_0.woff') format('woff'), url('../components/gibson/313E30_2_0.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_3_0.eot');
  src: url('../components/gibson/313E30_3_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_3_0.woff') format('woff'), url('../components/gibson/313E30_3_0.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_4_0.eot');
  src: url('../components/gibson/313E30_4_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_4_0.woff') format('woff'), url('../components/gibson/313E30_4_0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_5_0.eot');
  src: url('../components/gibson/313E30_5_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_5_0.woff') format('woff'), url('../components/gibson/313E30_5_0.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_6_0.eot');
  src: url('../components/gibson/313E30_6_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_6_0.woff') format('woff'), url('../components/gibson/313E30_6_0.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_7_0.eot');
  src: url('../components/gibson/313E30_7_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_7_0.woff') format('woff'), url('../components/gibson/313E30_7_0.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

然后进一步定义一个使用font-family的类：＆＃39; Gibson＆＃39;然后在fixed.html中分配该类但是这个解决方案无效。

我的实施有什么问题？我如何在scss-variables.json文件中使用font-face属性？

Answer 1

class MainActivity : FragmentActivity(){

    private lateinit var pagerAdapter: TabPagerAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        pagerAdapter = TabPagerAdapter(supportFragmentManager)
        pagerAdapter.addFragments(WorkoutGridFragment(), "Workouts")
        pagerAdapter.addFragments(AlertsFragment(), "Reminders")
        pagerAdapter.addFragments(AboutFragment(), "About")

        // customViewPager is the viewpager created in the activity_main xml layout
        customViewPager.adapter = pagerAdapter

        // set up the viewpager with the tablayout
        customTabLayout.setupWithViewPager(customViewPager)
    }
}

您需要覆盖 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $font-family-base: $font-family-sans-serif !default; 或 $font-family-sans-serif 变量。它们在$font-family-base中定义。我已覆盖 _variables.scss ，因为我的所有字体都是$font-family-sans-serif。

sans-serif

Answer 2

我首先在S3中添加了字体，然后在bootstrap-editor \ app \ scss \ reboot.scss中添加了@ font-face url。我现在检查的地方可以通过添加它来使用新创建的字体系列：

html
{
 font-family: Gibson
}

现在，当我从任何一个类中删除所有样式时，它将使用此字体系列。

所以最后我在上述文件中添加了font-face。正如mahan在回答中所说的，我使用$ font-family-sans-serif在整个主题中实现了Gibson。

如何将font-face添加到bootstrap主题中

2 个答案: