标签: font-family

我正在审查使用 system.drawing 命名空间中的 FontFamily.GenericSansSerif 的图像生成代码。如果没有发现更理想的（特定）字体，我通常会在 xhtml/css 字体选择语句的末尾看到类似的代码作为后备/最后的手段。在.net框架中，哪些环境参数会影响实际选择的字体？是否有某种图表说明了当您指定 GenericSansSerif 时 .net 框架如何选择字体？

这是一个示例CSS

h1 {
   font-family: 'header-font', arial, sans-serif;
}

p {
   font-family: 'paragraph-font', arial, serif;
}

是否可以加载任何远程Google字体(比如'Lato'),以便CSS中的系列名称为'header-font'？

编辑:这背后的想法是能够轻松交换WP主题中的字体.不幸的是,在我的情况下,在CSS预处理器中使用变量不是一个选项.

我正在尝试制作一个不使用网络字体的Web应用程序，以将浏览器请求保持在最低限度。

同时，我正在尝试仅将“好看”的细长字体用于标题等。

这基本上没有问题：iOS和Mac OS本身具有HelveticaNeue-UltraLight，而Windows（电话）具有Segoe UI（WP）Light。

字体看起来并不相同，但是它们具有相似的整体样式，我不必使用单个webfont。所有这些都可以通过CSS“ font-family”直接解决。

有没有办法在Android上获得类似的外观？Android具有Roboto Light，它完全可以满足我的要求，但是似乎不可能通过没有Webfonts的CSS样式简单地解决此问题。

我想在我的 Rshiny 应用程序中加入自定义字体。我有预感代码会放在tags$style 中，但没有实际的代码来包含它。

示例代码：

ui <- fluidPage(
        tags$style(  ),
        column(12,
                dataTableOutput("testtab")
              ) # close column
) #close fluidpage

server <- function(input, output, session) {
  output$testtab <- 
        DT::renderDataTable({
                               tab <- data.frame(a = 1:10, b = 11:20, c = 21:30)
                               dat.tab <- datatable(tab) %>% formatPercentage('a', 0) %>% 
                                                          formatCurrency(1:ncol(tab), '$')
                              return(dat.tab)
                            }) # close renderDataTable
} # close server

shinyApp(ui=ui, server=server)

例如，假设我想使用网络上的任何自定义字体。

我有多个来自同一系列的 .ttf 文件，例如：

MyFont.ttf
MyFont_Bold.ttf
MyFont_Light.ttf
MyFont_Medium.ttf

如果我想使用每个权重，我应该将主题定义为单独的 FontFamily，如下所示：

<FontFamily x:Key="MyFont">
    ms-appx:///Fonts/MyFont.ttf#MyFont
</FontFamily>
<FontFamily x:Key="MyFont_Bold">
    ms-appx:///Fonts/MyFont_Bold.ttf#MyFont
</FontFamily>
<FontFamily x:Key="MyFont_Light">
    ms-appx:///Fonts/MyFont_Light.ttf#MyFont
</FontFamily>
<FontFamily x:Key="MyFont_Medium">
    ms-appx:///Fonts/MyFont_Medium.ttf#MyFont
</FontFamily>

并像这样使用它们：

<TextBlock FontFamily="{StaticResource MyFont}" />
<TextBlock FontFamily="{StaticResource MyFont_Bold}" />
<TextBlock FontFamily="{StaticResource MyFont_Light}" />
<TextBlock FontFamily="{StaticResource MyFont_Medium}" />

有没有办法使用这样的主题：

<TextBlock FontFamily="{StaticResource MyFont}" />
<TextBlock FontFamily="{StaticResource MyFont}" FontWeight="Bold" />
<TextBlock FontFamily="{StaticResource MyFont}" FontWeight="Light" />
<TextBlock FontFamily="{StaticResource MyFont}" FontWeight="Medium" />

为了避免浏览器的缓存,我想将版本查询字符串连接到我@font-face的网址.有很多网址.如何以正确的方式？

@font-face {
   font-family: 'fontawesome';
   src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz');
   src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype'),
        url('/styles/fonts/fontawesome/fontawesome.ttf?6840zz') format('truetype'),
        url('/styles/fonts/fontawesome/fontawesome.woff?6840zz') format('woff'),
        url('/styles/fonts/fontawesome/fontawesome.svg?6840zz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
}

我在我的反应本机应用程序中对文本进行了一些更改:我需要为段落指定Roboto灯,为标题指定Roboto Bold.我需要在iOS和Android应用程序中具有相同的文本外观:所以我需要使它适用于我尝试此代码行代码

text : { fontFamily: 'sans-serif-light' },

但我得到这个错误:

我从官方文档中尝试了这种类型,它工作正常

title : { fontFamily: 'Cochin' },

- >所以我认为问题出在Roboto fontfamily本身..任何帮助？

我的 /assets/font 文件夹中有一些自定义字体，假设它是“ITC Charter Com Black”，我有四种文件：.eot .svg .tff .woff.

以及如何在我的项目中使用这些字体？我累了：font-family: 'ITC Charter Com Black';

这是行不通的。

我正在尝试在Material-UI主题的React应用程序中导入并使用Yellowtail字体（来自Google字体）。

据我所知，所有谷歌字体都在npm上，我已经安装了它，

npm install typeface-yellowtail-保存

命令。

我已将其导入App.js，并将其放在主题的字体系列部分中，并将主题传递给MuiThemeProvider，但它不起作用。我错过了什么？

这就是我在App.js中的内容（标题包含带有一些网格的AppBar，正文仅包含用于测试的h1文本）

import React, { Component, Fragment } from 'react';
import Header from './Components/Layouts/Header';
import AppBody from './Components/Layouts/AppBody';
import Footer from './Components/Layouts/Footer'; 
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Header />
        <AppBody />
        <Footer />       
      </MuiThemeProvider>
    );
  }
}

export default App;

我正在阅读有关可变字体的内容，但我不明白这个概念。

有 5 个注册轴 wght、wdth、ital、slnt、opsz。字体粗细已经预先存在，我们每天都在我们的 css 中使用它。

那么这里的可变字体和常规字体有什么区别呢？

另外，如果我在元素中放置一个范围font-weight: 100 500然后使用，我看不出任何区别。font-weight: 600<p>

即使我将其限制为 500，重量 600 仍能继续工作。

@font-face {
  font-family: "sketch_3dregular";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2-variations");
  font-weight: 100 500;
  font-stretch: 85% 100%;
}

html {
  font-size: 10px;
  margin: 0;
  font-family: "sketch_3dregular";
}

p {
  font-size: 1.4rem;
  line-height: 1.6;
  word-spacing: 0.6rem;
  font-weight: 600;
}