Laravel 语言环境定义的字体

Question

如何根据用户区域设置为我的应用程序定义 font-family？

假设用户切换到 ID 然后我更改网站正文的字体系列。

app.scss

作为示例，我添加了 3 种字体，并尝试根据选定的语言环境使用它们中的每一种

//use for "en"
@font-face {
  font-family: Nunito;
  src: url('/fonts/Nunito/Nunito-Regular.ttf');
}
//use for "id"
@font-face {
  font-family: Righteous;
  src: url('/fonts/Righteous/Righteous-Regular.ttf');
}
// use for "fa"
@font-face {
  font-family: Dirooz;
  src: url('/fonts/dirooz/Dirooz.ttf');
}

有什么想法吗？

Answer 1

您可以在 Vue 组件中执行此操作，当用户选择语言环境时触发另一个方法

假设您在 css 中为所有三个

定义了 @font-face

@font-face {
  font-family: Nunito;
  src: url('/fonts/Nunito/Nunito-Regular.ttf');
}
//use for "id"
@font-face {
  font-family: Righteous;
  src: url('/fonts/Righteous/Righteous-Regular.ttf');
}
// use for "fa"
@font-face {
  font-family: Dirooz;
  src: url('/fonts/dirooz/Dirooz.ttf');
}

然后在Vue组件中

setFontFamily() {    
    let styleTags = document.querySelectorAll('style');
    if(this.initialStyleTagsCount < styleTags.length) {
        //Remove the previous style tag
        let lastStyle = styleTags[styleTags.length - 1];
        document.head.removeChild(lastStyle);
    }

    let style = document.createElement('style');
    //style.appendChild(document.createTextNode(`
    //    @font-face {
    //        font-family: ${this.fontFamily};
    //        src: url('${this.fontFamilyUrl}`);
    //    }`
    //));

    style.appendChild(
        document.createTextNode(`body { font-family: '${this.fontFamily}' }`)
    );

    document.head.appendChild(style);    
}

您可以查找 table fontFamily 和 fontFamily 的值 url 对应于组件中的可用语言环境，并可能根据所选的 fontFamily 和 fontFamily url 计算属性语言环境

data(){
    return {
        //fonts: {
        //    en: 'Nunito', url: '/fonts/Nunito/Nunito-Regular.ttf'},
        //    id: { fontFamily: 'Righteous', url: '/fonts/Righteous/Righteous-Regular.tt'},
        //    fa: { fontFamily: 'Dirooz', url: '/fonts/dirooz/Dirooz.ttf'}
       // },

        fonts: {
            en: 'Nunito',
            id: 'Righteous',
            fa: 'Dirooz'
        },
        initialStyleTagsCount: this.getStyleTagsCount()
        // other data properties
    }
},

computed:{

    //fontFamily() {
    //    return this.fonts[this.locale]['fontFamily'];
    //},
    //fontFamilyUrl() {
    //    return this.fonts[this.locale]['url'];
    //},
    
    fontFamily() {
        return this.fonts[this.locale];
    }
},

methods:{
    getStyleTagsCount() {
        return document.querySelectorAll('style').length;
    }
}

Laravel 语言环境定义的字体

Laravel font defined by locale

php

fonts

laravel