Question

我想用Django构建一个网站，我需要创建CSS，这样用户在选择字体时可以有多种选择。如何以一种好的方式在CSS中设置它？

我不知道从哪里开始。我只尝试设置一种字体，并用不同的字体等创建其他主题。这似乎不是一个好习惯。不要重复自己的想法：）

那么我还需要了解更多关于能够使用多种字体的信息，以便用户可以选择？

Answer 1

为每个主题创建一个css选择器：

readLine()

然后，为了让您的用户能够更改主题，然后更改字体系列，我们将使用Javascript。我们将在.theme-time { font-family: "Times New Roman"; } .theme-courier { font-family: "courier"; } .theme-verdana { font-family: Verdana, sans-serif; }或html标记上添加此CSS类之一。

HTML部分（带选择）：

body

JavaScript部分（使用jQuery）：

<select id="theme-selector">
    <option value="theme-times">Times</option>
    <option value="theme-courier">Courier</option>
    <option value="theme-verdana">Verdana</option>
</select>

Answer 2

我建议您阅读W3Schools上的教程。

在下面的示例中，我使用了多种方法来设置font-property。

$(document).ready(function() {
  $("#font-change").click(function() {
    $(".content").css("font-family", "Arial");
    $("#font-change").fadeOut();
  });
});

body {
  margin: 16px;
  font-family: Arial;
  /* Set the font */
}
article {
  padding: 16px;
  border: 1px solid black;
}
article:after {
  display: inline-block;
  width: 0px;
  height: 0px;
  content: "";
  clear: both;
}
h1, h2 {
  margin: 0px 0px 4px 0px;
  padding: 0px;
}
p.content {
  margin: 0px;
  padding: 0px;
  color: #222;
  text-align: justify;
  font-family: Times;
  /* Set another font */
}
#font-change {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<article>
  <h1>Article Title</h1>
  <h2 style="font-family:Helvetica;">Subtitle with a different font.</h2>
  <p class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tortor est, bibendum sit amet sapien eu, tempor pharetra nulla. Sed vel facilisis urna. Morbi euismod odio ut ullamcorper imperdiet. Donec imperdiet elit nec magna bibendum, mattis hendrerit
    leo pellentesque. Nunc ut massa tempus, dictum ex vel, laoreet neque. Vivamus vulputate diam risus, eu viverra odio fringilla ac. Aliquam convallis mi eu magna ultrices, eu placerat felis porta. Sed faucibus magna mi. Donec facilisis, justo at mollis
    rhoncus, lectus lectus tincidunt est, vitae elementum lectus mauris a nunc.
  </p>
  <button id="font-change">Change font</button>
</article>

如何为多种字体选择设置CSS？

2 个答案: