Question

我正在尝试设计一个网站，但字体样式和大小有问题。我看了很多网站，以获得一些想法，例如，如果你看看这个网站：http://www.albionwestcoast.com/并检查右侧团队成员名称的字体样式和大小你可以看到他们显然使用格鲁吉亚的那个（红色）但是当我试图获得相同的形状时，我的字体看起来有点大胆和更胖，我不知道为什么。

这是我的风格：

font-size: 2em;
font-family: Georgia,'Times New Roman',serif;
font-style: italic;
font-weight: normal;

我失去了什么以获得同样的效果吗？

Answer 1

我发现如果您添加属性-webkit-font-smoothing: antialiased;，文本将会失去一些模糊性，并且看起来与Photoshop（仅适用于webkit）。不确定这是否符合您的要求，但无论哪种方式，它都会使文本更薄一些。

Answer 2

澄清/确认，您正在寻找CSS属性：

 font-weight: normal;

请参阅：http://www.w3schools.com/cssref/pr_font_weight.asp

并非所有字体都支持低于400的重量。

Answer 3

可能是font-weight属性。如果为它指定一个数字值，在100到900之间，总是以100为增量，即：100,200,300,400等，您将获得更大的灵活性......

400与正常相同，700与粗体
相同
```
font-weight: 300; 
```

Answer 4

您可以使用较小的字体大小，并通过CSS转换属性使其更高：

#include <iostream>
#include <array>
#include <numeric>
#include <chrono>

template<size_t num_rows, size_t row_index, size_t num_columns, size_t column_index>
class sumRow;

template<size_t num_rows, size_t row_index, size_t num_columns>
class sumRow<num_rows, row_index, num_columns, 0>
{
 public:
  static inline int result(const std::array<std::array<int, num_rows>, num_columns>& arrays) noexcept
  {
    return arrays[0][row_index];
  }
};

template<size_t num_rows, size_t row_index, size_t num_columns, size_t column_index>
class sumRow
{
 public:
  static inline int result(const std::array<std::array<int, num_rows>, num_columns>& arrays) noexcept
  {
    return arrays[column_index][row_index] + sumRow<num_rows, row_index, num_columns, column_index - 1>::result(arrays);
  }
};

// Array of arrays

template<size_t num_rows, size_t row_index, size_t num_columns>
class sumRows;

template<size_t num_rows, size_t num_columns>
class sumRows<num_rows, 0, num_columns>
{
 public:
  static inline void result(const std::array<std::array<int, num_rows>, num_columns>& arrays, std::array<int, num_rows>& result) noexcept
  {
    result[0] = sumRow<num_rows, 0, num_columns, num_columns - 1>::result(arrays);
  }
};

template<size_t num_rows, size_t row_index, size_t num_columns>
class sumRows
{
 public:
  static inline void result(const std::array<std::array<int, num_rows>, num_columns>& arrays, std::array<int, num_rows>& result) noexcept
  {
    result[row_index - 1] = sumRow<num_rows, row_index - 1, num_columns, num_columns - 1>::result(arrays);
    sumRows<num_rows, row_index - 1, num_columns>::result(arrays, result);
  }
};

template<size_t num_rows, size_t num_columns>
inline void sum_rows(const std::array<std::array<int, num_rows>, num_columns>& arrays, std::array<int, num_rows>& result)
{
  sumRows<num_rows, num_rows, num_columns>::result(arrays, result);
};

template<size_t num_channels, size_t channel_size>
inline void loop_sum(const std::array<std::array<int, channel_size>, num_channels>& channels, std::array<int, channel_size>& results) noexcept
{
  for (size_t sample_index = 0; sample_index < channel_size; ++sample_index)
  {
    int result = 0;
    for (size_t channel_index = 0; channel_index < num_channels; ++channel_index)
    {
      result += channels[channel_index][sample_index];
    }
    results[sample_index] = result;
  }
};

// Inspired by from https://stackoverflow.com/a/21995693/2996272
struct measure_cpu_clock
{
  template<typename F, typename ...Args>
  static clock_t execution(F&& func, Args&&... args)
  {
    auto start = std::clock();
    std::forward<decltype(func)>(func)(std::forward<Args>(args)...);
    return std::clock() - start;
  }
};

const int num_channels = 850;

const int num_samples = 32;
using channel = std::array<int, num_samples>;

int main()
{
  std::array<channel, num_channels> channels{};
  for (auto&& item : channels)
  {
    std::iota(item.begin(), item.end(), 1);
  }
  // Templated version
  channel results = {};

  auto execution_time = measure_cpu_clock::execution(sum_rows<num_samples, num_channels>, channels, results);
  std::cout << "Templated version took: " << execution_time << " ns." << std::endl;

  // Loop version
  channel results2 = {};

  execution_time = measure_cpu_clock::execution(loop_sum<num_channels, num_samples>, channels, results2);
  std::cout << "Loop version took:      " << execution_time << " ns." << std::endl;

}

在当前日期（https://caniuse.com/#feat=transforms2d）使用简单的2D变换非常安全。

如何在Web上使字体变薄

4 个答案: