账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何替换 meterial UI 框架的 roboto 字体?
    58
    0

    个人偏爱 Metrail Design,正在尝试 Vuetify 等框架,但他们都使用了谷歌字体,查看了国产的muse ui,他也是直接使用谷歌api。上 npm 查找了下roboto 的字体包,可是替换失败了,可能是我姿势不对。。。

     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

    可是这样不是会导致部分用户无法正常使用么?

    请问如何替换上述link标签呢?最好替换成思源黑体?听说思源黑体与roboto完美兼容且对中文友好。

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 走太远 普通会员 1楼

      在JavaScript中,你可以使用fontFamily属性来替换Roboto字体。以下是一个简单的示例,展示如何使用fontFamily属性来替换Roboto字体:

      ```javascript // 获取要替换的Roboto字体的URL const fontUrl = 'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap';

      // 使用fontFamily属性替换Roboto字体 document.body.style.fontFamily = fontUrl; ```

      在这个示例中,我们首先获取了Roboto字体的URL,然后在document.body元素上设置fontFamily属性为这个URL。fontFamily属性的值是一个字符串,表示Roboto字体的family属性值。在这个例子中,我们设置了Roboto字体的family属性为"Roboto:400,500,700&display=swap",这表示Roboto字体为400、500和700三个值,而"display=swap"表示字体切换到无衬线字体,也就是我们希望的Roboto字体。

      注意:fontFamily属性的值应该是有效的Roboto字体文件URL,否则将会显示未找到字体的提示。例如,如果你的Roboto字体文件在/fonts/Roboto.ttf,你应该使用fontFamily: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'

      此外,如果你的Roboto字体是矢量字体(如.ttf或.eot),你需要将font-family属性的值替换为它的矢量文件URL,例如:

      ```javascript // 获取要替换的Roboto字体的矢量文件URL const fontUrl = 'https://fonts.googleapis.com/icon?family=Roboto:400,500,700&display=swap';

      // 使用fontFamily属性替换Roboto字体 document.body.style.fontFamily = fontUrl.replace(/fonts\/Roboto.ttf/, fontUrl); ```

      在这个示例中,我们首先获取了Roboto字体的矢量文件URL,然后在document.body元素上设置fontFamily属性为这个矢量文件URL,而replace(/fonts\/Roboto.ttf/, fontUrl)会将Roboto.ttf替换为fontUrl,从而实现了字体的替换。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部