我试图将实时更新字体大小列表框添加到项目中，我似乎无法让它工作。
我已经将HTML字体大小选择器和一些java脚本添加到现有的工作项目而没有运气，我似乎无法弄明白，因为它看起来很完整，我认为它应该可行。
这是我正在使用的代码。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" />
<script src="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>
<style>
body { padding:50px; background-color:#333;}
p, h1 { color:#fff;}
</style>
</head>
<body>
<script>
$(function(){
$('#font').fontselect().change(function(){
// replace + signs with spaces for css
var font = $(this).val().replace(/\+/g, ' ');
// split font into family and weight
font = font.split(':');
// set family on paragraphs
$('p').css('font-family', font[0]);
});
});
</script>
<script>
$("#size").change(function() {
$('p').css("font-size", $(this).val() + "px");
});
</script>
<p> </p>
<input id="font" type="text" />
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</body>
</html>
答案 0 :(得分：0)
以下是我使用代码段更新的答案。问题是：1）在顶部丢失<html><head>，2）缺少jquery包，3）fonteselect.js和fontselect.css需要用https：//调用，而不是http：//。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" />
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>
<style>
body { padding:50px; background-color:#333;}
p, h1 { color:#fff;}
</style>
</head>
<body>
<script>
$(function(){
$('#font').fontselect().change(function(){
// replace + signs with spaces for css
var font = $(this).val().replace(/\+/g, ' ');
// split font into family and weight
font = font.split(':');
// set family on paragraphs
$('p').css('font-family', font[0]);
});
});
</script>
<script>
$("#size").change(function() {
$('p').css("font-size", $(this).val() + "px");
});
</script>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<p> </p>
<input id="font" type="text" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
答案 1 :(得分：0)
Chrome开始拒绝从非加密来源下载链接，以打击网络钓鱼诈骗，您可以阅读有关该here的更多信息。
所以，问题是您下载JQuery和fontselect库的<script>链接是通过 http 而不是 https 完成的，而您的浏览器不是因此而下载它们。
更改：
<script src="http://ajax.googleapis.com/ajax/l...
<script src="http://www.jqueryscript.net/demo/Easy-Google-Web-F...
致：
<script src="https://ajax.googleapis.com/ajax/l...
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-F...
$(function(){
$('#font').fontselect().change(function(){
// replace + signs with spaces for css
var font = $(this).val().replace(/\+/g, ' ');
// split font into family and weight
font = font.split(':');
// set family on paragraphs
$('p').css('font-family', font[0]);
});
});
$("#size").change(function() {
$('p').css("font-size", $(this).val() + "px");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css">
<style>
body { padding:50px; background-color:#333;}
p, h1 { color:#fff;}
</style>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<p> </p>
<input id="font" type="text" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
// First, get a reference to the drop down and the target element
var dd = document.getElementById("size");
var target = document.querySelector("p");
// Then, set up an event handling function for when the value of the select changes
dd.addEventListener("change", function(){
// Remove the previously applied class
target.className = "";
// Just apply the CSS class that corresponds to the size selected
target.classList.add(dd.value);
});body { padding:50px; background-color:#333;}
p, h1 { color:#fff;}
/* CSS class names must start with a letter */
.seven { font-size:7px; }
.ten { font-size:10px; }
.twenty { font-size:20px; }
.thirty { font-size:30px; }<select id="size">
<option value="">Choose a font size...</option>
<!-- The values here must match the names of the CSS classes -->
<option value="seven">7</option>
<option value="ten">10</option>
<option value="twenty">20</option>
<option value="thirty">30</option>
</select>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
答案 2 :(得分：-1)
首先，确保在文档中链接了jQuery库。然后，确保$(this).val()为您提供正确的值。