javascript - 谷歌字体 api

问题描述

我正在做一个项目来创建谷歌字体列表的预览，目前我想让字体样式与字体系列相匹配，例如：在“#font-selection”中，如果我们选择字体系列为“Roboto” ，并且它只在“#style-selection”中打印Roboto的字体粗细。但现在我要做的问题是字体变体在“#style-selection”中的完整列表中。任何关于字体样式选择的想法只显示与字体系列匹配的列表？

<label for="">Headline</label>
<select name="google_fonts_headline" id="font-selection">
    <option value="">Please Select</option>
</select>
<br/>
<br/>

<label for="">Font Style</label>
<select name="google_fonts_style" id="style-selection">
    <option value="">Please Select</option>
</select>

   <label for="">Subline</label>
<select name="google_fonts_subline" class="fonts" id="subline-selection">
    <option valuue="">Please Select</option>
</select>

   <div class="preview" style='border:1px solid red;'>
    <h1>headline test</h1>
    <p>subline here.</p>
</div>

<script>

    $(document).ready(function(){
        function getArray(){
            return $.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyD5e27MJ3ujq0cjs720_rElG5tAf3KbPb8');
        }

        getArray().done(function(fonts) {  
            var str = '';
            var subset = '';

            $.each(fonts, function(k, v) {
                // font family
                $.each(fonts.items, function(key, val) {
                    str+= '<option value='+ val.family +'>' + val.family + '</option>';

                    // // font style
                    $.each(val.variants, function(i, ctg){
                        subset+= '<option value='+ ctg +'>' + ctg + '</option>';
                    })
                })
            })

            $('#font-selection').append(str);
            $('#subline-selection').append(str);
            $('#style-selection').append(subset);
        });


        // font selection 
        function fontSelection(){
            $("select.fonts").change(function (e){
                var id =$('#font-selection option' +':selected').val();  
                var id2 =$('#subline-selection option' +':selected').val();  

                $(".preview h1").css('font-family',id);
                $(".preview p").css('font-family', id2);

                var font = $('#font-selection').val(),
                    font2 = $('#subline-selection').val(),
                    name = this.options[this.selectedIndex].textContent;
                
               
                if (font === 'default') {
                    $(this).css("font-family", 'inherit');
                } else {
                    $(this).css("font-family", name);
                    var link = replacestyle('https://fonts.googleapis.com/css?family=' + font +  "|" + font2);
                }
            });
        }

        fontSelection();


        // font style
        function styleSelection(){
            $("#font-selection").change(function(e){
                $('#style-selection').css('border', '1px solid red');
            })
        }

        styleSelection();
    })

    // append to <head>
    function replacestyle(url) {
        if (!document.getElementById('style_fonts')) {
            var style_tag = document.createElement('link');
            style_tag.rel = 'stylesheet';
            style_tag.id = 'style_fonts';
            style_tag.type = 'text/css';
            document.getElementsByTagName('head')[0].appendChild(style_tag);
            replacestyle(url);
        }
        document.getElementById('style_fonts').href = url;
    }

    // append to <script>
    var script = document.createElement('script');
    script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyD5e27MJ3ujq0cjs720_rElG5tAf3KbPb8';
    document.body.appendChild(script);
</script>

标签： javascriptjqueryarraysjson

javascript - 谷歌字体 api - json 循环

问题描述

解决方案

推荐阅读