Jquery -谷歌字体选择字体大小，重量，风格

Jquery - Google Font Select with Font Size, Weight, Style

本文关键字：字体 重量 风格 选择 谷歌 Jquery      更新时间：2023-09-26

我试图自定义一个功能，我已经选择了一个谷歌字体和更新预览div，但我也想添加"字体大小"，"字体重量"，"字母间距"等，但有了这个功能，它只适用于当你点击主字体选择器combox框，我想检查其他选项，如字体重量，大小，字母间距，然后更新预览，我尝试为每个元素单独添加Jquery代码，但我无法获得主选择框的值ID。有人能帮我做这个，或者至少在我添加的一个额外的选项上工作，这样我就可以做我自己了。请看看这个小提琴，因为我几乎是0，当它涉及到jquery. 

//init when value is changed
jQuery( '.google_font_select' ).change(function(){ 
    var mainID = jQuery(this).attr('id');
    GoogleFontSelect( this, mainID );
});
http://jsfiddle.net/3eWmJ/

看一下代码中的这些行:

var _selected = $(slctr).val();
...
$('.'+ _previewer ).css('font-family', _selected +', sans-serif' );

我们本质上要做的是复制代码以改变文本的其他属性。这些代码行所做的是定义包含选项的HTML元素，并更改font-family CSS属性的值。基本上，我们只需要做同样的事情，但对于其他属性。

以font-weight属性为例，让我们为font-weight: 的下拉菜单分配一个变量
var font_weight = $('#gfont_weight').val();

然后我们使用这个变量来获取字体的粗细，并像这样赋值:

$('.'+ _previewer ).css('font-weight', font_weight);
相关文章：